孟繁永

如何初始化项目暂且不说，请看vue-electron的官方文档。

先给大家看一下package.json的部分配置：

“main”: “dist/electron/electron.js”,
  “build”: {
    “appId”: “ink.weiban.portal”,
    “productName”: “WeiBan”,
    “copyright”: “Copyright © 2019 北京商连信息科技有限公司”,
    “directories”: {
      “output”: “./outapp”,
      “app”: “./dist”
    },
    “win”: {
      “target”: [
        “nsis”
      ],
      “icon”: “./static/ico/favicon256.ico”,
      “artifactName”: “${productName}-Setup.${ext}”,
      “publisherName”: “WeiBan”,
      “signingHashAlgorithms”: [
        “sha256”
      ],
      “signDlls”: true,
      “rfc3161TimeStampServer”: “http://timestamp.digicert.com”,
      “certificateFile”: “./static/codeSign/windows/shanglian.pfx”,
      “certificatePassword”: “shanglian”
    },
    “linux”: {
      “target”: [
        “AppImage”
      ],
      “artifactName”: “${productName}.${ext}”
    },
    “mac”: {
      “target”: [
        “dmg”
      ],
      “icon”: “./static/ico/favicon.icns”,
      “artifactName”: “${productName}.${ext}”
    },
    “nsis”: {
      “createDesktopShortcut”: “always”
    },
    “publish”: {
      “provider”: “s3”,
      “bucket”: “electron-app”,
      “endpoint”: “https://electron-app.s3.cn-north-1.amazonaws.com.cn”
    }
  },
  “scripts”: {
    “dev”: “webpack-dev-server –inline –progress –config build/webpack.dev.conf.js”,
    “start”: “npm run dev”,
    “unit”: “jest –config test/unit/jest.conf.js –coverage”,
    “e2e”: “node test/e2e/runner.js”,
    “test”: “npm run unit && npm run e2e”,
    “lint”: “eslint –ext .js,.vue src test/unit test/e2e/specs”,
    “build”: “node build/build.js”,
    “build-electron-dev”: “node build/build-electron-dev.js”,
    “build-electron-prod”: “node build/build-electron-prod.js”,
    “dir”: “electron-builder –dir”,
    “win32”: “electron-builder –win –ia32”,
    “win64”: “electron-builder –win –x64”,
    “mac”: “electron-builder –mac”,
    “linux”: “electron-builder –linux”
  },

构建mac的客户端之前首先要将vue构建好，即运行：

npm run build-electron-prod

然后运行：

sudo yarn mac

之所以要加sudo是yarn用到一些系统目录，不加会报错。（关于如何安装yarn请看官网）

yarn run v1.17.3
$ electron-builder –mac
• electron-builder version=21.1.1 os=18.7.0
• loaded configuration file=package.json (“build” field)
• writing effective config file=outapp/builder-effective-config.yaml
• packaging platform=darwin arch=x64 electron=5.0.6 appOutDir=outapp/mac
• signing file=outapp/mac/WeiBan.app identityName=Developer ID Application: Beijing Shanglian Information Technology Co., Ltd. (R65P3V6H9V) identityHash=BA45718278F5E4268071035C88A48F38A2271B1C provisioningProfile=none
• building target=DMG arch=x64 file=outapp/WeiBan.dmg
• building block map blockMapFile=outapp/WeiBan.dmg.blockmap
✨ Done in 22.15s.

这个时候已经可以看到Weiban.dmg文件已经构建成功。但是还不能直接发布，mac是不能运行的。

接下来要做的最重要的一件事就是通过Notarize Your Preexisting Software。链接这里讲的很清楚，但有几个关键步骤着重强调一下。

XCode用最新版，这个不用犹豫，直接更新并安装。

然后设置开发者证书，里面有各种授权和证书，这里不再赘述，请找熟悉的开发者当面请教，比较关键的是两个：（1）生成Developer ID Application证书，并部署到当前的mac中。（2）注册mac客户端，Identifiers中添加一个macOS类型的。

接下来就可以进入官方引导中的上传这一步了，就是把打包好的dmg上传给苹果。

官方给的命令（点击该地址可以获取准确的命令，复制以下内容有可能会造成字符偏差）是：

xcrun altool --notarize-app --primary-bundle-id "com.example.ote.zip" --username "AC_USERNAME" --password "@keychain:AC_PASSWORD" --file OvernightTextEditor_11.6.8.zip

我们要修改其中的一些内容，比如改成：

xcrun altool –notarize-app –primary-bundle-id “ink.weiban.mac.word” –username “fymeng@51shanglian.com” –password “@keychain:AC_PASSWORD” –file DFS/DFS-portal/outapp/WeiBan.dmg

其中，ink.weiban.mac.word就是在开发者账户中设置的Identifiers的Bundle ID，fymeng@51shanglian.com就是AC_USERNAME，而密码我保留了@keychain:AC_PASSWORD这个赋值，意思就是让命令去我的本机的钥匙串中调用AC_PASSWORD中存储的密码。为了实现这个效果，需要提前将密码存到钥匙串中，命令是：

security add-generic-password -a "fymeng@51shanglian.com" -w <密码我也不会告诉你的> -s "AC_PASSWORD"

当然，fymeng@51shanglian.com这个帐号需要有权限，在这里检查或者添加https://itunesconnect.apple.com/access/users ，最小权限应该是开发人员，要包括上传构建版本这个权限。

另外值得注意的是如果fymeng@51shanglian.com这个帐号开启了二次验证，命令行是不能直接用的，需要到苹果官网新建一个设备密码，上面保存到钥匙串的应该是这个设备密码，如果没有启用二次验证，则可以直接用登录密码。这个命令行会报错。

还有一个，命令行报错说某帐号已经关联了其他任务，那就新建一个专用帐号吧，反正不要钱。