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