electron-vue实现自动更新功能
electron-vue项目很多时候需要自动更新的功能，避免每次发版都要单独发安装包的尴尬，下面介绍一下如何利用electron-updater来实现自动更新一、首先是安装，安装方式很多，不多说，这里需要注意的是electron-updater、electron以及electron-builder版本之间的兼容性由于git上下来的electron-vue项目electron版本比较低为2x版本，所
electron-vue项目很多时候需要自动更新的功能，避免每次发版都要单独发安装包的尴尬，下面介绍一下如何利用electron-updater来实现自动更新
一、 首先是安装，安装方式很多，不多说，这里需要注意的是electron-updater、electron以及electron-builder版本之间的兼容性
由于git上下来的electron-vue项目electron版本比较低为2x版本，所以对于版本比较高的electron-updater是不支持的，这里推荐使用3x到4x之间的electron-updater版本，当然也可以提升electron的版本来适配electron-updater，通过测试目前7x一下的electron版本是对electron-updater兼容比较好的，
这里选用的版本分别是：electron-updater----3.0.0、electron----7.3.3、electron-builder---20.19.2
好，版本选定后可以安装一下了，首先在package.json中"devDependencies"下添加"electron-updater": "^3.0.0",然后把electron的版本改为7.3.3既："electron": "^7.3.3","electron-builder": "^20.19.2",
实例如下：
"devDependencies": {
"electron-updater": "^3.0.0",
"electron": "^7.3.3",
"electron-builder": "^20.19.2",
}之后要在package.json中的build添加publish字段，用来设置自动更新地址和生成yml文件，如下：
"publish": [
{
"provider": "generic",
"url": "http://www.8888888.com/ceshi/" //这里指向存放的目录而非文件
}
],修改并保存后，进入文件夹，把node_modules依赖包手动删除或者命令行删除都可以，删除后重新npm i一下依赖包
二、OK炒菜需要的菜品已经齐全，下一步就开始炒菜
1.在src\renderer下创建一个文件夹untils并在改文件夹下创建一个Update.js的文件，文件内容如下
import {
autoUpdater
} from 'electron-updater'
import {
ipcMain
} from 'electron'
let mainWindow = null;
export function updateHandle(window, feedUrl) {
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) => {
//执行自动更新检查
autoUpdater.checkForUpdates();
})
}
//给渲染进程发送消息
function sendUpdateMessage(text) {
mainWindow.webContents.send('message', text)
}这个文件是处理自动更新逻辑的，包括更新各个过程，建好后进入到主进程index.js中引入这个文件，并触发里面的函数，如下
import { app, BrowserWindow, Menu } from 'electron'
import {updateHandle} from '../renderer/utils/Update.js';
let mainWindow
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:9080`
: `file://${__dirname}/index.html`
function createWindow() {
mainWindow = new BrowserWindow({
useContentSize: true,
minWidth: 930,
minHeight: 565,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadURL(winURL)
let feedUrl = "http://www.88888888.com/ceshi/";
//检测版本更新
updateHandle(mainWindow,feedUrl);
mainWindow.on('closed', () => {
mainWindow = null
})
}上面只是简单例子，其他内容自行添加
之后就可以在rander进程中监听并触发自动更新了，在什么时候触发自行考量，这里举例为在app.vue中，如下
<template>
<div id="app">
<router-view></router-view>
<el-dialog
title="正在更新版本,请稍后 ···"
:visible.sync="dialogVisible"
width="60%"
:close-on-click-modal="closeOnClickModal"
:close-on-press-escape="closeOnPressEscape"
:show-close="showClose"
center
>
<div style="width:100%;height:5vh;line-height:5vh;text-align:center">
<el-progress
status="success"
:text-inside="true"
:stroke-width="20"
:percentage="percentage"
:width="strokeWidth"
:show-text="true"
></el-progress>
</div>
</el-dialog>
</div>
</template>
<script>
const { ipcRenderer } = require('electron')
let self = this;
//接收主进程版本更新消息
ipcRenderer.on("message", (event, arg) => {
// console.log(arg);
if ("update-available" == arg.cmd) {
//显示升级对话框
self.dialogVisible = true;
} else if ("download-progress" == arg.cmd) {
// console.log(arg.message.percent);
let percent = Math.round(parseFloat(arg.message.percent));
self.percentage = percent;
} else if ("error" == arg.cmd) {
self.dialogVisible = false;
self.$message(arg);
} else if ("update-not-available" == arg.cmd) {
// self.$message(arg);
}
});
//开始检测新版本
let timeOut = window.setTimeout(() => {
ipcRenderer.send("checkForUpdate");
// console.log('开始检测更新触发')
}, 500);
clearTimeout;
export default {
name: "globalquickseek",
data() {
return {
dialogVisible: false,
closeOnClickModal: false,
closeOnPressEscape: false,
showClose: false,
percentage: 0,
strokeWidth:200
};
},
mounted() {
self = this;
},
destroyed() {
window.clearInterval(interval);
window.clearInterval(timeOut);
}
};
</script>
<style>
/* CSS */
#app {
height: 100%;
overflow: hidden;
}
#app>div{
overflow: hidden;
}
.tableList {
widows: 150px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.el-tooltip__popper{
font-size: 14px;
max-width: 300px !important;
text-align: justify;
text-justify: newspaper;
word-break: break-all;
line-height: 20px;
}
</style>
ok，至此配置就已经结束了，下面就可以尝试自动升级了，先打包一个低版本的，既：package.json中version字段写为：0.0.1，打包完毕之后安装应用，安装完成之后再打包个高版本的，既：package.json中version字段写为：0.0.2，然后把打包后的高版本的.exe文件和yml文件上传至你上面配置的那个网址，传完之后打开刚才安装的.exe应用，感受自动升级的方便吧
备注：这里需要注意的是苹果版本需要上传的文件要多一些，把zip格式的也要传至服务器，另外，mac打包的时候需要代码签名才能更好的实现自动更新，否则在执行quitAndInstall方法时会跳出，具体代码签名我下一篇文章再写吧，这一篇有点长了
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献8条内容
所有评论(0)