1、官网demo下载地址
按照官网demo说明文档进行安装和运行
2、添加electron-updater
npm install electron-updater
根据项目需求安装对应的版本，建议使用5.2.1
3、创建一个handleUpdater.js文件，和package.json同级
// const { ipcMain } = require('electron')
const { autoUpdater } = require("electron-updater")
const {ipcMain, app} = require("electron");
let canQuit = false;
function handleUpdate(mainWindow) {
console.log("版本更新检测",mainWindow)
autoUpdater.setFeedURL("填写自己项目更新地址") // 设置下载地址
function sendUpdateMessage(text) {
mainWindow.webContents.send('message', text);
}
mainWindow.on('close', (event) => {
if (!canQuit) {
mainWindow.hide();
mainWindow.setSkipTaskbar(true);
event.preventDefault();
}
});
// 检查更新出错
autoUpdater.on('error', (error) => {
console.log('autoUpdater-error:::', arguments)
sendUpdateMessage({
cmd: 'error',
message: error,
});
})
// 检查是否有版本更新
autoUpdater.on('checking-for-update', (message) => {
console.log('checking-for-update:::', arguments)
sendUpdateMessage({
cmd: 'checking-for-update',
message: message
})
})
// 检测到有版本更新
autoUpdater.on('update-available', (message) => {
console.log('update-available:::', arguments)
sendUpdateMessage({
cmd: 'update-available',
message: message,
});
})
// 未发现有新版本
autoUpdater.on('update-not-available', (message) => {
console.log('update-not-available:::', arguments)
sendUpdateMessage({
cmd: 'update-not-available',
message: message,
});
})
// 更新下载进度事件
autoUpdater.on('download-progress', progressObj => {
console.log('download-progress:::', progressObj)
sendUpdateMessage({
cmd: 'download-progress',
message: progressObj,
});
})
// 下载完成，询问用户是否更新
autoUpdater.on('update-downloaded', ( event, releaseNotes, releaseName, releaseDate, updateUrl) => {
console.log('update-downloaded::: 下载完成，询问用户是否更新')
sendUpdateMessage({
cmd: 'update-downloaded',
message: {
releaseNotes,
releaseName,
releaseDate,
updateUrl,
},
});
// autoUpdater.quitAndInstall();
})
//接收渲染进程消息，开始检查更新
ipcMain.on('checkForUpdate', () => {
console.log("接收渲染进程消息，开始检查更新")
//执行自动更新检查
// sendUpdateMessage({cmd:'checkForUpdate',message:arg})
autoUpdater.checkForUpdates();
});
ipcMain.on('quitAndInstall', () => {
console.log("接收渲染进程信息，是否立即更新")
autoUpdater.quitAndInstall();
});
//接收渲染进程信息，是否立即更新
` // ipcMain.on('quitAndInstall', () => {
// console.log("接收渲染进程信息，是否立即更新")
// autoUpdater.quitAndInstall();
// });`
// 手动下载更新文件
// ipcMain.on('confirmDownloadUpdate', () => {
// console.log("手动下载")
// autoUpdater.downloadUpdate();
// });
}
module.exports = {
handleUpdate
}
4、创建更新页面updater.vue
<template>
<el-dialog
:title="percentage == 100 ? '下载完成' : '正在下载新版本,请稍候...'"
:visible.sync="dialogVisible"
width="500px"
:close-on-click-modal="closeOnClickModal"
:close-on-press-escape="closeOnPressEscape"
:show-close="showClose"
center
>
<div
style="width: 100%; height: 50px; line-height: 50px; 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>
</template>
<script>
let { ipcRenderer } = window.require("electron");
import config from '../../package.json'
import { getAuthToken, removeAuthToken } from '@/utils/auth'
import { logout } from '@/api/index'
export default {
data() {
return {
dialogVisible: false,//是否打开弹窗
closeOnClickModal: false,//是否可通过点击遮罩关闭 MessageBox
closeOnPressEscape: false,//是否可通过按下 ESC 键关闭 MessageBox
showClose: false,//是否显示关闭按钮
percentage: 0,//进度条进度
strokeWidth: 200,//进度条的厚度
confirmShowClose: false,//是否显示右上角关闭按钮
confirmShowCancelButton: false,//是否显示取消按钮
forcedUpdating: false,//是否需要强制更新
timeOut: null,
interval: null
}
},
mounted() {
//接收主进程版本更新消息
ipcRenderer.on("message", (event, arg) => {
//监听息屏或者睡眠状态
if ('lock-screen' == arg.cmd) {
this.handleLogout()
} else if ("update-available" == arg.cmd) {
console.log("监听发现可用更新事件")
//监听发现可用更新事件，判断是否在login页面，也可以选择不需要判断页面自己进行更新
if (this.$route.name != 'login') {
this.$Bus.$emit('uploadVersion')
} else {
this.$notify({
title: '更新提示',
message: "有新版本发现，即将开始更新"
});
this.dialogVisible = true;
// 这里是当有新版本发现时，出现弹框进行确认是否需要更新
// this.updateAvailable(arg)
}
} else if ("download-progress" == arg.cmd) {
// 更新下载进度事件
this.downloadProgress(arg)
} else if ("error" == arg.cmd) {
console.log("监听升级失败事件")
//监听升级失败事件
this.error(arg)
} else if ('update-downloaded' == arg.cmd) {
console.log("监听下载完成事件")
//监听下载完成事件
this.updateDownloaded(arg)
}
});
//2秒后开始检测新版本
this.timeOut = window.setTimeout(() => {
console.log("2222")
ipcRenderer.send("checkForUpdate");
}, 2000);
this.interval = window.setInterval(() => {
ipcRenderer.send("checkForUpdate");
}, 1800000);
this.$Bus.$off("headerUplaod").$on("headerUplaod", () => {
ipcRenderer.send("checkForUpdate");
})
},
methods: {
/* 登出 */
handleLogout() {
if (this.$route.name != 'login') {
logout(JSON.parse(getAuthToken('userInfo')).userName).then(() => {
removeAuthToken('userInfo')
removeAuthToken('deptInfo')
this.$router.push("/login")
this.$Bus.$emit("closeSocket")
})
}
},
//监听发现可用更新事件
updateAvailable(arg) {
let text
//根据版本号来判断是否需要强制更新
if (arg.message) {
let A = config.version.split('.')[0]; // 本地版本号
let a = arg.message.version.split('.')[0]; // 服务器安装包版本号
let B = config.version.split('.')[1];
let b = arg.message.version.split('.')[1];
//如果版本号的第一位或者第二位是和目前的版本号不一样就需要强制更新
if (a > A || b > B) {
text = '发现新版本,需要立即更新才能使用！'
this.confirmShowClose = false //是否显示右上角关闭按钮
this.confirmShowCancelButton = false //是否显示取消按钮
this.forcedUpdating = true //强制更新
} else {
text = '发现新版本,是否下载新版本?'
this.forcedUpdating = false //寻求用户是否需要更新
}
}
//显示升级对话框
this.$confirm(text, '提示', {
showClose: this.confirmShowClose,//是否显示右上角关闭按钮
showCancelButton: this.confirmShowCancelButton,//是否显示取消按钮
closeOnClickModal: false,//是否可通过点击遮罩关闭 MessageBox
closeOnPressEscape: false,//是否可通过按下 ESC 键关闭 MessageBox
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.dialogVisible = true; //打开安装白下载进度弹窗
ipcRenderer.send("confirmDownloadUpdate"); // 手动下载更新文件
}).catch(() => {
});
},
// 更新下载进度事件
downloadProgress(arg) {
//更新升级进度
// this.dialogVisible = true; //关闭弹窗
let percent = Math.round(parseFloat(arg.message.percent));
console.log(`更新升级进度---percent`)
this.percentage = percent;
},
//监听升级失败事件
error(arg) {
this.dialogVisible = false; //关闭弹窗
console.log('更新失败');
},
//监听下载完成事件
updateDownloaded() {
//有时候网速太快会跳过获取进度，这里进度加个判断，手动设置获取更新进度
this.percentage = this.percentage != 100 ? 100 : this.percentage
//如果需要强制更新的就不需要再询问客户是否安装
// console.log(this.forcedUpdating);
if (this.forcedUpdating) {
ipcRenderer.send("quitAndInstall"); //退出并安装更新包
} else {
this.$confirm('下载完成，是否立即更新?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
closeOnClickModal: false,//是否可通过点击遮罩关闭 MessageBox
closeOnPressEscape: false,//是否可通过按下 ESC 键关闭 MessageBox
type: 'warning'
}).then(() => {
ipcRenderer.send("quitAndInstall"); //退出并安装更新包
}).catch(() => {
this.dialogVisible = false; //关闭弹窗
this.$message({
type: 'info',
message: '已取消更新'
});
});
}
}
},
destroyed() {
//清除定时器
window.clearTimeout(this.timeOut);
window.clearTimeout(this.interval);
}
}
</script>
1、本地运行皆为正常，但是打包后，客户端安装后报错cannot find modulee 'electron-updater'
原因：打包时未将electron-updater进行打包
解决办法：在package.json文件中找到build，在extraFiles里面添加'node_modules/electron-updater/'，后续出现这种问题根据提示完成插件的添加
"build": {
"asar": true,
"asarUnpack": "**\\*.{node,dll}",
"productName": "police",
"appId": "com.tencent.trtc-electron-simple-demo",
"icon": "public/info-avatar.ico",
"directories": {
"output": "./bin"
},
"publish": [
{
"provider": "generic",
"url": "https://jqga.jqwjw.cn/clientupdate/"
}
],
"win": {
"target": [
"nsis",
"zip"
],
"extraFiles": [
{
"from": "node_modules/trtc-electron-sdk/build/Release/",
"to": "./resources",
"filter": [
"**/*"
]
},
// 主要代码
{
"from": "node_modules/electron-updater/",
"to": "./resources/node_modules/electron-updater",
"filter": [
"**/*"
]
},
]
},
"files": [
"dist/**/*",
"*.js",
"!node_modules"
]
},
在vue项目中使用let { ipcRenderer } = require("electron");必须在前面添加window.不然会提示fs.existsSync is not function
仅仅为个人记录，不喜勿喷