包版本
"electron-updater": "^4.2.4"
"electron": "^4.2.12"
"vue-electron": "^1.0.6"
使用vue init simulatedgreg/electron-vue my-project脚手架初始化项目时，electron版本为2+，window打包后生成的应用在window7上会有兼容性问题，打不开应用，升级4+版本
windows和mac打包
- windows电脑仅可打包windows版本应用、mac电脑仅可打包mac版本应用
- 第一次打包时可能会遇到资源下载失败的情况，此时手动下载对应资源，然后拷贝到各平台对应的目录：
Linux: $XDG_CACHE_HOME or ~/.cache/electron/
MacOS: ~/Library/Caches/electron/
Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/Local/electron/Cache/
- windows打包出exe安装包，在package.json中的build字段中配置nsis，优化安装体验
"nsis": {
"allowToChangeInstallationDirectory": true, // 是否可以自定义安装目录
"oneClick": false, // 是否一键安装
"perMachine": false // 询问为哪个用户安装
}
- 打包测试环境安装包，新增一个环境变量
process.env.NODE_ENV_PRO，并在webpack中通过webpack.DefinePlugin将脚本中的环境变量设置到模块中
// 通过cross-env设置环境变量
"build:win": "cross-env NODE_ENV_PRO=pro node .electron-vue/build.js && electron-builder --win --ia32",
// webpack.renderer.config.js及webpack.renderer.config.js中增加修改代码
new webpack.DefinePlugin({
- 'process.env.NODE_ENV': '"production"'
+ 'process.env.NODE_ENV': '"production"',
+ 'process.env.NODE_ENV_PRO': JSON.stringify(process.env.NODE_ENV_PRO)
}),
- mac打包和windows打包最大的不同就是代码签名，mac上进行代码签名请移步这篇文章Electron 打包Mac安装包代码签名问题解决方案
自动更新
- 使用
electron-updater - 在package.json中的build字段中配置publish，用来在打包时生成
.yml文件
"publish": [
{
"provider": "generic", // 服务器提供商 也可以是GitHub等等
"url": "http://127.0.0.1:8080/zip/" // 静态服务器地址
}
]
- 将打包生成的.dmg、latest-mac.yml(mac)或者.exe、latest.yml(windows)放在服务器的zip目录
- main.js中添加如下代码
import { autoUpdater } from 'electron-updater'
autoUpdater.autoDownload = false
autoUpdater.setFeedURL('http://127.0.0.1:8080/zip/') // 静态服务地址
autoUpdater.checkForUpdates()
<!--对应事件-->
autoUpdater.on('error', function () {
// 检查更新出错
})
autoUpdater.on('checking-for-update', function () {
// 正在检查更新
})
autoUpdater.on('update-available', function (info) {
// 有新版本
})
autoUpdater.on('update-not-available', function (info) {
// 没有新版本
})
autoUpdater.on('download-progress', function (progressObj) {
// 新版本下载进度
})
autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
autoUpdater.quitAndInstall() // 下载完成后立即退出并更新
})
