electron-vue实现远程更新程序

我的electron版本：^12.0.0; vue版本：^3.2.13。

我实现electron远程更新是通过electron-update插件实现，electron-update版本为：^5.3.0

核心代码分为三部分：

第一部分：main.js中编写更新方法；对官方接口的重写（这个不是很重要，可以按需）

第二部分：在vue.config.js中配置打包路径，安装措施等（一键安装，是否创建桌面图标）

第三部分：vue页面写具体的展示

具体代码：

第一部分：

import { app, protocol, BrowserWindow, Menu, ipcMain } from "electron"; 
const { autoUpdater } = require("electron-updater");
const log = require("electron-log"); //----方法开始-------下列方法写在createWindow(){**这里**}里面
ipcMain.on("thisCheckForUpdates", () => {autoUpdater.checkForUpdates();//检查更新autoUpdater.on("checking-for-update", () => {log.info("正在检查更新...");});//没有可用更新autoUpdater.on("update-not-available", () => {log.info("没有可用更新.");win.webContents.send("thisUpdatenotavailable", {code: 102,msg: "没有可用更新",data: {},});});//有可用更新autoUpdater.on("update-available", (info) => {log.info("有可用更新." + info);log.info(info);// autoUpdater.downloadUpdate()win.webContents.send("thisUpdateavailable", {code: 200,msg: "有可用更新",data: info,});});// 更新出错autoUpdater.on("error", (err) => {log.info("更新出错. " + err);win.webContents.send("thisUpdateerror", {code: 200,msg: "更新出错",data: err,});});//更新下载完成autoUpdater.on("update-downloaded", (info) => {log.info("更新下载完成", info);log.info("开始安装...");autoUpdater.quitAndInstall();});// }});// 接收更新命令ipcMain.on("thisDownloadnow", () => {// 更新前，删除本地安装包 ↓// let updaterCacheDirName = app.getName() + '-updater';// const updatePendingPath = path.join(autoUpdater.app.baseCachePath, updaterCacheDirName, 'pending')// fs_extra.emptyDir(updatePendingPath)// 更新前，删除本地安装包 ↑//开始下载autoUpdater.downloadUpdate();});
//----方法结束----

第二部分：

//设置打包后信息pluginOptions: {electronBuilder: {builderOptions: {appId: "这里自定义",copyright: "Copyright © 2023-06-09",win: {icon: "./public/logo.png",},mac: {icon: "./public/logo.png",},productName: "自定义",publish: [{provider: "generic",url: 这里是发布地址，也即程序启动后，从哪里获取新版本。写到该文件所属文件夹就可,例如file文件夹下有latest.yml文件和exe文件（latest.yml和exe是更新必备，latest包含版本信息，exe是安装程序），那么地址可以写为：*****/flie },],},nodeIntegration: true,nsis: {oneClick: false, // 一键安装allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。allowToChangeInstallationDirectory: true, // 允许修改安装目录installerIcon: "./public/logo.png", // 安装图标uninstallerIcon: "./public/logo.png", //卸载图标installerHeaderIcon: "./public/logo.png", // 安装时头部图标createDesktopShortcut: true, // 创建桌面图标createStartMenuShortcut: true, // 创建开始菜单图标//  include: "./resources/installer.nsh", //默认安装目录配置文件},},},

第三部分：

<template><div class="main" style="padding: 2vh"><el-card class="card" shadow="hover"><el-row class="rowContent"><el-col :span="24" @click="toUpdate()"><span style="float: left">&ensp;&ensp;软件版本：2023.06.09 Version 0.0.1&ensp;&ensp;</span><el-tagv-if="isUpdate"roundclass="ml-2"style="float: left; height: 4vh"type="warning">有新版本可用，点击获取</el-tag><el-tagv-if="!isUpdate"roundclass="ml-2"style="float: left; height: 4vh"type="success">最新版</el-tag><span style="float: right; color: darkgrey">>&ensp;&ensp;&ensp;</span></el-col><hr class="hrLine" /><el-col :span="24" @click="toInstruction"><span style="float: left">&ensp;&ensp;使用说明</span><span style="float: right; color: darkgrey">>&ensp;&ensp;&ensp;</span></el-col><hr class="hrLine" /><el-col :span="24" @click="toFeedback"><span style="float: left">&ensp;&ensp;意见反馈</span><span style="float: right; color: darkgrey">>&ensp;&ensp;&ensp;</span></el-col></el-row></el-card></div>
</template>
<script>
import { ElNotification } from "element-plus";
import { ipcRenderer } from "electron";
export default {name: "SystemSet",data() {return {isUpdate: false,};},created() {},mounted() {this.checkVersion();},methods: {toInstruction() {this.$router.push("/systemMain/instructions");},toFeedback() {this.$router.push("/systemMain/feedback");},toUpdate() {ElNotification({title: "系统通知",message: "正在系统版本升级，请稍后....",type: "success",});ipcRenderer.send("thisDownloadnow");},checkVersion() {//发送检测更新命令ipcRenderer.send("thisCheckForUpdates");//接收可以更新的命令ipcRenderer.on("thisUpdateavailable", (ev, res) => {this.isUpdate = true;});},},
};
</script>
<style scoped>
.rowContent {font-size: 2em;
}
.hrLine {width: 100%;
}
.card {padding: 10vh;border-radius: 2vh;
}.el-col:hover {cursor: pointer;
}
</style>

代码搞定；

升级，那就需要版本不同。

先打包一个高版本的（在package.json里面指定高版本）将高版本生成的latest.yml和exe文件放到服务器（在vue.config.js里面指定过）；再打包一个低版本的安装到机器上。

妥当，可以尝试了~~~~~~