微版云是如何用vue-electron构建mac客户端的

如何初始化项目暂且不说,请看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这个帐号开启了二次验证,命令行是不能直接用的,需要到苹果官网新建一个设备密码,上面保存到钥匙串的应该是这个设备密码,如果没有启用二次验证,则可以直接用登录密码。这个命令行会报错。

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

About

Leave Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.