三步搞定electron-vue 软件自动更新

安装依赖npm i electron-updater,package.json配置build下publish参数如下:

image.png

 

主进程添加代码main/index.js

 

import { autoUpdater } from 'electron-updater' // 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写 !function updateHandle() { let message = { error: '检查更新出错', checking: '正在检查更新……', updateAva: '检测到新版本，正在下载……', updateNotAva: '现在使用的就是最新版本，不用更新', }; const uploadUrl = "http://61.4.184.177:7799/download/"; // 下载地址，不加后面的**.exe autoUpdater.setFeedURL(uploadUrl); autoUpdater.on('error', function (error) { sendUpdateMessage(message.error) }); autoUpdater.on('checking-for-update', function () { sendUpdateMessage(message.checking) }); autoUpdater.on('update-available', function (info) { sendUpdateMessage(message.updateAva) }); autoUpdater.on('update-not-available', function (info) { sendUpdateMessage(message.updateNotAva) }); // 更新下载进度事件 autoUpdater.on('download-progress', function (progressObj) { mainWindow.webContents.send('downloadProgress', progressObj) }) autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) { ipcMain.on('isUpdateNow', (e, arg) => { console.log(arguments); console.log("开始更新"); //some code here to handle event autoUpdater.quitAndInstall(); }); mainWindow.webContents.send('isUpdateNow') }); ipcMain.on("checkForUpdate",()=>{ //执行自动更新检查 autoUpdater.checkForUpdates(); }) }() // 通过main进程发送事件给renderer进程，提示更新信息 function sendUpdateMessage(text) { mainWindow.webContents.send('message', text) } 渲染进程添加代码App.vue

 

created(){ const _this = this _this.$electron.ipcRenderer.send("checkForUpdate"); _this.$electron.ipcRenderer.on("message", (event, text) => { console.log(arguments); _this.tips = text; alert(text) }); _this.$electron.ipcRenderer.on("downloadProgress", (event, progressObj)=> { console.log(progressObj); _this.downloadPercent = progressObj.percent || 0; }); _this.$electron.ipcRenderer.on("isUpdateNow", () => { _this.$electron.ipcRenderer.send("isUpdateNow"); }); }, beforeDestroy(){ // this.$electron.ipcRenderer.removeAll(["message", "downloadProgress", "isUpdateNow"]); }

打包，将生成的exe文件和latest.yml文件上传至服务器

 

image.png

引用 electron-vue autoupdater

作者：丘比特爱上猫 链接：https://www.jianshu.com/p/7a1c5fa14b16 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。