Vue Electron 插件支持自动更新服务
别人笑我太疯癫,我笑别人看不穿
插件名称:vue-cli-plugin-electron-builder
推荐理由:比simulatedgreg/electron-vue要简单不少
Github地址:
nklayman/vue-cli-plugin-electron-buildergithub.com
长话短说,直接上代码,先安装electron-updater
npm install electron-updater --save
然后在background.js中加入相关代如下:
import { app, protocol, BrowserWindow, ipcMain } from 'electron' import { autoUpdater } from "electron-updater" //注意此处 //忽略无关代码 ipcMain.on("checkUpdate", () => { //处理更新操作 const returnData = { error: { status: -1, msg: '更新时发生意外,无法进行正常更新!' }, checking: { status: 0, msg: '正在检查更新……' }, updateAva: { status: 1, msg: '正在升级……' }, updateNotAva: { status: 2, msg: '开始加载程序……' } }; //更新连接 autoUpdater.setFeedURL('http://ursite.com/release/'); //更新错误事件 autoUpdater.on('error', function (error) { sendUpdateMessage(returnData.error) }); //检查事件 autoUpdater.on('checking-for-update', function () { sendUpdateMessage(returnData.checking) }); //发现新版本 autoUpdater.on('update-available', function (info) { sendUpdateMessage(returnData.updateAva) }); //当前版本为最新版本 autoUpdater.on('update-not-available', function (info) { setTimeout(function () { sendUpdateMessage(returnData.updateNotAva) }, 1000); }); //更新下载进度事件 autoUpdater.on('download-progress', function (progressObj) { splashWindow.webContents.send('downloadProgress', progressObj) }); //下载完毕 autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) { //退出并进行安装(这里可以做成让用户确认后再调用) autoUpdater.quitAndInstall(); }); //发送消息给窗口 function sendUpdateMessage(text) { splashWindow.webContents.send('message', text) } //发送请求更新 autoUpdater.checkForUpdates(); });
在Splash Window的Vue文件中中,加入更新检测:
mounted() { let me = this; //请求检查更新 this.$electron.ipcRenderer.send("checkUpdate"); //下载中收到的进度信息 this.$electron.ipcRenderer.on("downloadProgress", (event, data) => { me.prograssStyle.width = data.percent.toFixed(2) + "%";//更新进度条样式 me.stepText = "正在更新中(" + me.prograssStyle.width + ")..."; }); //监听请求更新响应,用来处理不同的事件 this.$electron.ipcRenderer.on("message", (event, data) => { me.stepText = data.msg; switch (data.status) { case -1: alert(data.msg); //退出程序 this.$electron.ipcRenderer.send("logout"); break; case 2: me.downloadDb();//下载sqlite数据库文件 break; } }); }
修改vue.config.js并新增编译参数:
module.exports = { pluginOptions: { electronBuilder: { builderOptions: { "productName": "XXXX",//不要出现中文,除非你Apache支持中文路径 "appId": "com.xxx.xxx", "win": { "publish": [ { "provider": "generic", "url": "http://ursite.com/release/" //更新服务器地址,可为空 } ] } } } } }
现在我们在centos上安装Apache服务并启动它:
yum install httpd
然后在/var/www/html目录下创建release目录,并将开发机器上的host改成xxx.xx.xxx.xx ursite.com
回到项目中来,打开package.js,把version改成1.0.0,执行构建命令:
npm run electron:build
你应该会见到在dist_electron目录下会出现以下三个文件:
不要动里面任何东西,将这三个文件上传到服务器上的release目录下。然后再将package.js中的version改成1.1.0,也上传到服务器首行,覆盖latest.yml。
最后,再将package.js中的version改回1.0.0,开始进行测试。
Good luck。
文章出处: https://zhuanlan.zhihu.com/p/76788039