最近一段时间在用electron+vue做内部项目的一键构建发布系统的桌面应用，现就其中打包流程写个备注，以示记录。
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
"appId": "org.***.electron-vue",
"directories": { "output": "build" },
"publish": [
{
"provider": "generic",
//隐藏自动更新存包服务器IP
"url": "http://**.**.**.**:3001/download/"
}],
"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-x64\electron-builder-19.19.1\winCodeSign-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-userland/electron-builder/issues/2009；首先下载https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-1.9.0；然后解压到相应的缓存目录中；
nsis-3.0.1.13：翻墙后可以下载成功；
nsis-resources-3.3.0：翻墙后下载两次可以成功。
Cache目录最终文件：
4.打包应用
解决以上问题之后，打包即可正常完成，打包后.exe(windows安装包)、.yml（windows自动更新配置）文件存放于./build文件夹中。