最近一段時間在用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.9” –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交流。