最终效果
在开始之前, 先让我们看一下最终效果: 在打开软件的时候, 会自动判断当前是否为最新版(和文件服务器上的最新版本进行对比), 如果不是最新版, 则会自动下载安装并打开新版
自动更新过程.gif
在看过最终自动检测更新的效果之后, 让我们从头开始配置
初始化vue-cli3项目
vue-cli3初始化项目已经去掉了vue.config.js, 这里需要自己新增文件进行配置
安装与配置electron-updater
//安装
npm install electron-updater --save
- 安装好后, 会在package.json中生成一些script脚本, 另外electron-builder的配置项需要写在vue.config.js中, 因为vue-cli3.0已不再支持package.json中配置config和build, 否则会报下述错误*
error: 'build' in the application package.json is not supported since 3.0 anymore
打开vue.config.js
pluginOptions:{
...
electronBuilder: {
nodeIntegration: true,
contextIsolation: false,
builderOptions: {
productName: "vue-config-package",
appId: "123",
//注意, 只有在配置了publish路径时, build之后才会生成latest.yml文件
publish: [
{
"provider": "generic",
"url": "http://127.0.0.1:8000/"
}
]
}
}
}
搭建文件服务器
在本地搭建文件服务器, 用于存放最新的安装包和latest.yml文件
- latest.yml文件是自动更新的重要依据, 里面记录了版本号, 安装exe路径, 打包release时间等
npm i -g simplehttpserver
//进入根目录, 执行下列代码
simplehttpserver
//默认8000端口, 也可以自定义端口: simplehttpserver -p 8080
前期准备和安装工作已经完成, 接下来要编写update.js脚本(主进程), 以及渲染页面中的监听和后续操作
主进程update.js
在background.js同级目录新增update.js, 用于封装主进程的electron-update的事件回调
import {
autoUpdater
} from 'electron-updater'
import {
ipcMain
} from 'electron'
let mainWindow = null;
export function updateHandle(window, feedUrl) {
debugger
mainWindow = window;
let message = {
error: '检查更新出错',
checking: '正在检查更新……',
updateAva: '检测到新版本，正在下载……',
updateNotAva: '现在使用的就是最新版本，不用更新',
};
//设置更新包的地址
autoUpdater.setFeedURL(feedUrl);
//监听升级失败事件
autoUpdater.on('error', function (error) {
sendUpdateMessage({
cmd: 'error',
message: error
})
});
//监听开始检测更新事件
autoUpdater.on('checking-for-update', function (message) {
sendUpdateMessage({
cmd: 'checking-for-update',
message: message
})
});
//监听发现可用更新事件
autoUpdater.on('update-available', function (message) {
sendUpdateMessage({
cmd: 'update-available',
message: message
})
});
//监听没有可用更新事件
autoUpdater.on('update-not-available', function (message) {
sendUpdateMessage({
cmd: 'update-not-available',
message: message
})
});
// 更新下载进度事件
autoUpdater.on('download-progress', function (progressObj) {
sendUpdateMessage({
cmd: 'download-progress',
message: progressObj
})
});
//监听下载完成事件
autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl) {
sendUpdateMessage({
cmd: 'update-downloaded',
message: {
releaseNotes,
releaseName,
releaseDate,
updateUrl
}
})
//退出并安装更新包
autoUpdater.quitAndInstall();
});
//接收渲染进程消息，开始检查更新
ipcMain.on("checkForUpdate", (e, arg) => {
//执行自动更新检查
// sendUpdateMessage({cmd:'checkForUpdate',message:arg})
autoUpdater.checkForUpdates();
})
}
//给渲染进程发送消息
function sendUpdateMessage(text) {
mainWindow.webContents.send('message', text)
}
background.js中:
//自动更新脚本
import { updateHandle } from './update.js';
async function createWindow() {
...
//这里是文件服务器的根路径地址
let feedUrl = "http://127.0.0.1:8000/";
updateHandle(win,feedUrl);
}
渲染进程
App.vue
<template>
<div>
<p>当前版本1.0</p>
<p v-if="dialogVisible">正在更新新版本,请稍候...</p>
</div>
</tempalte>
<script>
let ipcRenderer = require("electron").ipcRenderer;
let _this = this;
//接收主进程版本更新消息
ipcRenderer.on("message", (event, arg) => {
// for (var i = 0; i < arg.length; i++) {
console.log('Appvue:',arg);
if ("update-available" == arg.cmd) {
//显示升级对话框
_this.dialogVisible = true;
} else if ("download-progress" == arg.cmd) {
//更新升级进度
console.log(arg.message.percent);
let percent = Math.round(parseFloat(arg.message.percent));
_this.percentage = percent;
} else if ("error" == arg.cmd) {
_this.dialogVisible = false;
alert("更新失败");
}
// }
});
//2秒后开始检测新版本
let timeOut = window.setTimeout(() => {
ipcRenderer.send("checkForUpdate");
}, 2000);
clearTimeout;
//间隔1分钟检测一次
let interval = window.setInterval(() => {
ipcRenderer.send("checkForUpdate");
}, 60000);
export default {
data(){
return{
dialogVisible: false,
closeOnClickModal: false,
closeOnPressEscape: false,
showClose: false,
percentage: 0,
strokeWidth:200
}
},
mounted(){
_this = this;
},
methods:{
ipcRenderer(keyword){
this.$electron.ipcRenderer.send(keyword,"123");
},
},
destroyed() {
window.clearInterval(interval);
window.clearInterval(timeOut);
}
}
</script>
测试步骤
- 更改package.json中的version和App.vue中任意内容(例如当前版本X.X可以看出当前版本效果特性的内容)
- 将最新的安装包放到simplehttpserver运行的本地文件服务根目录中
- 安装运行旧版本的包, 则会进入并且自动更新下载打开新的资源包
参考文档
1.electron官方文档:https://www.electronjs.org/docs/tutorial/quick-start
2.electron-builder官方文档:https://www.electron.build/api/electron-builder
3.electron-builder常用配置中文注释https://blog.csdn.net/sw7662504/article/details/109241935?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-8&spm=1001.2101.3001.4242
4.vue-cli2.0+electron配置教程https://blog.csdn.net/gsj4719896/article/details/100131840
