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", //默认安装目录配置文件
      },
    },
  },

第三部分：

代码搞定；

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

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

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