Electron 桌面应用打包（npm run build）简述(windows + mac)

最近一段时间在用electron+vue做内部项目的一键构建发布系统的桌面应用，现就其中打包流程写个备注，以示记录。

Windows环境打包：
1.首先贴一下package.json。

{
"name": "******",//隐藏项目名
"version": "**.**.**",//隐藏版本号
"author": "*** <***>",//隐藏作者信息
"description": "***",//隐藏应用描述
"license": "MIT",
"main": "./dist/electron/main.js",
"scripts": {
"build": "node .electron-vue/build.js && electron-builder",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node .electron-vue/dev-runner.js",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"postinstall": ""
},
"build": {
"productName": "***",//隐藏包名
"appId": "org.***.electron-vue",//隐藏appid
"directories": {
"output": "build"
},
"publish": [
{
"provider": "generic",
"url": "http://**.**.**.**:3001/download/"//隐藏自动更新存包服务器IP
}
],
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns",
"artifactName": "${productName}_setup_${version}.${ext}"
},
"win": {
"icon": "build/icons/icon.ico",
"artifactName": "${productName}_setup_${version}.${ext}"
},
"linux": {
"icon": "build/icons",
"artifactName": "${productName}_setup_${version}.${ext}"
}
},
"dependencies": {
"electron-updater": "^2.18.2",
"jenkins-api": "^0.3.1",
"socket.io": "^2.0.4",
"socket.io-client": "^2.0.4",
"vue": "^2.3.3",
"vue-electron": "^1.0.6",
"vue-router": "^2.5.3",
"xml2js": "^0.4.19"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"babili-webpack-plugin": "^0.1.2",
"cfonts": "^1.1.3",
"chalk": "^2.1.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.4",
"del": "^3.0.0",
"devtron": "^1.4.0",
"electron": "^1.7.5",
"electron-builder": "^19.19.1",
"electron-debug": "^1.4.0",
"electron-devtools-installer": "^2.2.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"less": "^3.0.0-alpha.3",
"less-loader": "^4.0.5",
"multispinner": "^0.2.1",
"node-loader": "^0.6.0",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.5",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.5.2",
"webpack-dev-server": "^2.7.1",
"webpack-hot-middleware": "^2.18.2"
}
}

2.项目打包

一件构建系统打包命令，根目录执行npm run build;
3.打包依赖安装

electron打包，执行npm run build命令，速度很慢，无论翻墙与否，均无法顺利下载打包相关依赖(electron-v1.7.9-win32-x64electron-builder-19.19.1winCodeSign-1.9.0 nsis-3.0.1.13 nsis-resources-3.3.0)，执行打包操作。

执行npm run build之前先设置淘宝镜像

set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

electron-v1.7.9-win32-x64: 首先卸载其他版本，然后指定安装1.7.9版本到开发依赖中；

npm uninstall electron && npm install electron@”1.7.” –save-dev;

electron-builder-19.19.1: 解决方法同electron-v1.7.9-win32-x64；

winCodeSign-1.9.0：Warning: Cannot download winCodeSign, attempt #1: Error: Request timed out，多次下载均无法完成，参照electron-builder项目中的issues地址：https://github.com/electron-u...；首先下载https://github.com/electron-u...；然后解压到相应的缓存目录中；

nsis-3.0.1.13：翻墙后可以下载成功；

nsis-resources-3.3.0：翻墙后下载两次可以成功。
Cache目录最终文件：

4.打包应用

解决以上问题之后，打包即可正常完成，打包后.exe(windows安装包)、.yml（windows自动更新配置）文件存放于./build文件夹中。

注意：打包中出现个奇怪的问题，同样的package.json，我这边打包正常，在我同事电脑上打包报错，或者是打包后安装文件报错（相关依赖找不到）。最后发现问题出现在npm依赖安装上，我是使用的yarn安装的node_modules，我同事是用npm install安装的node_modules，所以如果打包之后出现相关依赖找不到的话，不妨把node_modules删掉重新使用yarn安装试试。

MAC环境打包：
1.依赖安装
mac下依赖安装要比windows环境快的多，打包依赖一般都是mac环境特有的platform=darwin。安装比较顺利，也就不啰嗦了。
2.代码签名
mac打包和windows打包最大的不同就是代码签名，mac上进行代码签名请移步这篇文章Electron 打包Mac安装包代码签名问题解决方案。

注意：mac上不签名也可以打包成功，但是涉及到自动更新等需要身份认证的功能则不能用，也不能发布到mac app store中。所以说经过代码签名的MAC包才是完整的包。

未经代码签名的MAC打包过程：

经过代码签名的MAC打包过程：

3.打包应用。
mac打包后会生成包括.dmg和latest-mac.yml的安装文件。

如果这篇文章对你的工作或者学习有帮助的话，请收藏或点个赞。如果对其中有什么不明白的或者报错，可以留言或者加QQ群140455228交流。