electron重启后更新_Vue Electron 插件支持自动更新服务
插件名称:vue-cli-plugin-electron-builder推荐理由:比simulatedgreg/electron-vue要简单不少Github地址:nklayman/vue-cli-plugin-electron-buildergithub.com长话短说,直接上代码,先安装electron-updaternpm install electron-updater --save然后
插件名称: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。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)