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-tag
            v-if="isUpdate"
            round
            class="ml-2"
            style="float: left; height: 4vh"
            type="warning"
            >有新版本可用，点击获取</el-tag
          >
          <el-tag
            v-if="!isUpdate"
            round
            class="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里面指定过）；再打包一个低版本的安装到机器上。

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