摘要：
electron-updater实现更新electron应用程序第一步安装"electron-updater":"^4.3.5",打开package.json文件在build对象下添加publish配置，"build":{"productName":"xxx","appId":"org.simulatedgreg.electron-vue","directories":{"output":"bui
第一步
安装 "electron-updater": "^4.3.5",打开 package.json文件在build对象下添加publish配置，
"build": {
"productName": "xxx",
"appId": "org.simulatedgreg.electron-vue",
"directories": {
"output": "build"
},
---------------------------------------------
"publish": [
{
"provider": "generic",
"url": "https://xxx.com"
//注：这个url就是放.yml文件和安装包的服务器地址,我这里用的是阿里云oss地址
}
],
--------------------------------------------------
"files": [
"dist/electron/**/*"
]
第二步
在main文件夹下面创建更新文件 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) => {
//执行自动更新检查
// sendUpdateMessage({cmd:'checkForUpdate',message:arg})
autoUpdater.checkForUpdates();
})
}
//给渲染进程发送消息
function sendUpdateMessage(text) {
mainWindow.webContents.send('message', text)
}
在main文件夹下面的 index.js中引入update.js
import { updateHandle } from './update'
mainWindow.on('closed', () => {
mainWindow = null
})
----------------------------------------------------
let feedUrl = "https://xxxxx.com";
updateHandle(mainWindow,feedUrl);
-----------------------------------------------------
}
第三步
在 APP.js文件中检测更新
<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="100%;height:15vh;line-height:15vh;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>
let ipcRenderer = require("electron").ipcRenderer;
let _this = this;
//接收主进程版本更新消息
ipcRenderer.on("message", (event, arg) => {
// for (var i = 0; i < arg.length; i++) {
console.log(arg);
if ("update-available" == arg.cmd) {
//显示升级对话框
_this.dialogVisible = true;
} else if ("download-progress" == arg.cmd) {
//更新升级进度
/**
*
* message{bytesPerSecond: 47673
delta: 48960
percent: 0.11438799862426002
total: 42801693
transferred: 48960
}
*/
console.log(arg.message.percent);
let percent = Math.round(parseFloat(arg.message.percent));
_this.percentage = percent;
} else if ("error" == arg.cmd) {
_this.dialogVisible = false;
_this.$message("更新失败");
}
// }
});
ipcRenderer.send("checkForUpdate");
//20秒后开始检测新版本
// let timeOut = window.setTimeout(() => {
// ipcRenderer.send("checkForUpdate");
// }, 20000);
clearTimeout;
//间隔1小时检测一次
// let interval = window.setInterval(() => {
// ipcRenderer.send("checkForUpdate");
// }, 3600000);
export default {
name: 'App',
data() {
return {
dialogVisible: false,
closeOnClickModal: false,
closeOnPressEscape: false,
showClose: false,
percentage: 0,
strokeWidth:200
};
},
mounted() {
_this = this;
},
destroyed() {
window.clearInterval(interval);
window.clearInterval(timeOut);
}
}
</script>
第四步
将项目打包yarn build,将打包后生成的build目录下的latest.yml和安装包.exe文件传入服务器即可
坑！！！
注：我在开发的时候遇到了一个坑，打包成功后打开项目报错 A JavaScript error occurrend in the main process
这是electron版本过低导致的，后来我将版本升级到4.0.1，再打包就正常运行了。
本文使用 mdnice 排版