Electron实现应⽤打包、⾃动升级过程解析
成功搭建了vue + electron的helloworld程序，这次将electron应⽤打包及⾃动升级的流程梳理了⼀下。
1. 应⽤打包
使⽤electron builder打包只需要在fig.js中配置即可，这⾥需要注意的是，默认情况下electron builder打包出来的安装程序是不能修改安装⽬录的，需要allowToChangeInstallationDirectory这个配置设置为true。
// see /config
productionSourceMap: false,
pluginOptions: {
electronBuilder: {
nodeIntegration: true,
builderOptions: {
appId: 'com.itqn.electron.helloworld',
productName: 'helloworld',
// see www.electron.build/configuration/publish#genericserveroptions
publish: {
provider: 'generic',
url: '192.168.1.100/itqn/electron/helloworld'
},
win: {
// must be at least 256x256
icon: './public/favicon.ico'
},
asar: false,
nsis: {
oneClick: false,
// 允许修改安装⽬录
allowToChangeInstallationDirectory: true,
allowElevation: true,
createDesktopShortcut: true,
createStartMenuShortcut: true,
shortcutName: 'helloworld'
}
}
},
configureWebpack: {
resolve: {
symlinks: true
}
}
}
}
接着执⾏下⾯的命令进⾏应⽤打包
npm run electron:build
如果成功打包，将为在项⽬的dist_electron⽬录中⽣成对应的exe。
打包过程中可能出现favicon.icon must be at least 256x256的错误，这⾥需要在⽹上⽤⼯具将icon转化为256x256的即可。
2. ⾃动升级
使⽤electron的⾃动升级功能，需要安装electron-updater这个依赖，这⾥只是开发时⽤到，所以使⽤-D安装。
npm install electron-updater -D
编写更新程序update.js
import { dialog } from 'electron'
import { autoUpdater } from 'electron-updater'
import http from 'http'
// see www.electron.build/auto-update#events
<('update-downloaded', info => {
if (v.NODE_ENV === 'production') {
// /docs/api/auto-updater#autoupdaterquitandinstall
// 这⾥先拉取更新信息，在对话框中显⽰版本的更新内容
const req = quest('192.168.1.3/itqn/electron/', req => {
let detail = ''
req.setEncoding('utf-8')
<('data', chunk => {
detail += String()
})
<('end', () => {
dialog.showMessageBox(
{
icon: __static + '/favicon.png',
type: 'info',
title: '软件更新',
electron vue教程message: `已更新到最新版本（${info.version}）请重启应⽤。`,
detail: detail,
buttons: ['确定']
},
idx => {
// 点击确定的时候执⾏更新
if (idx === 0) {
autoUpdater.quitAndInstall()
}
}
)
})
})
}
})
export default autoUpdater
然后在程序启动的时候进⾏版本检测，如果有新版会⾃动更新。
在background.js中引⼊update.js，并在ready事件中检测版本。
import autoUpdater from './update'
<('ready', async () => {
// 这⾥只在⽣产环境才执⾏版本检测。
if (v.NODE_ENV === 'production') {
autoUpdater.checkForUpdates()
}
createWindow()
})
这样，Electron桌⾯应⽤程序就⽀持在线⾃动更新了，下⾯将使⽤nginx进⾏⾃动更新测试。
3. 升级测试
默认情况下，创建应⽤的版本为0.1.0，这⾥测试应⽤从0.1.0⾃动升级为0.1.1。
安装 0.1.0 版本
为了测试应⽤⾃动更新，需要在本地安装⼀个0.1.0版本，将应⽤打包成exe，然后安装在⾃⼰的电脑上。升级版本为 0.1.1
将应⽤升级为 0.1.1 版本，只需要将package.json中的版本号更新为0.1.1即可。
{
"name": "electron-helloworld",
"version": "0.1.1",
}
这⾥为了测试⽅便，可以在Helloworld.vue中加⼊版本，或者读取应⽤版本号。
<div>{{txt}}</div>
<button @click="readTxt">读取⽂件信息</button>
<div>v0.1.1</div>
重新打包应⽤，打包成功后dist_electron⽬录中会多出⼏个⽂件，下⾯这三个是升级需要⽤到的：helloworld Setup 0.
helloworld Setup 0.blockmap
发布新版本 0.1.1
新版本打包后需要发布到服务器中，这⾥可以使⽤nginx做为服务器。
需要注意的是，应⽤程序中指定的服务器更新地址为：
所以必须将应⽤发布到这⾥，才能实现⾃动升级（这⾥我使⽤的是本地IP，实际使⽤应该是⽤域名）。
使⽤nginx作为服务器，需要在本地安装nginx，可以在官⽹下载nginx，解压即可。
修改nginx的配置f
http {
server {
listen 80;
location / {
root D:/nginx/www;
}
}
}
这⾥指定了nginx的root为D:/nginx/www，所以需要在www这个⽬录下创建itqn/electron/helloworld这个⽬录，最终的⽬录路径为：
D:\nginx\www\itqn\electron\helloworld
将新版本打包的三个⽂件放到helloworld这个⽬录中，然后新增⼀个⽂件编写更新内容，最后helloworld⽬录下的⽂件如下：
helloworld Setup 0.
helloworld Setup 0.blockmap
<
启动nginx服务器
最后启动已经安装好0.1.0程序。
可以看到程序启动后，弹出了新版本的更新内容，这⾥点击确定执⾏更新，更新成功后会⾃动重启应⽤。
下⾯是更新后的界⾯，可以看到应⽤已经更新到了最新版本0.1.1。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。