Eelctron+vue如何配置自动更新--简易配置实现

一、下载安装electron-updater

npm install electron-updater --save

二、配置updater,为了方便我们新建一个update.js这里我把它放在util文件夹下,大家复制粘贴就完事

update.js:

import {
    autoUpdater
} from 'electron-updater'
 
import {
    ipcMain
} from 'electron'
let mainWindow = null;
let canQuit = false;
export function updateHandle(window, feedUrl) {
    mainWindow = window;
    //设置更新包的地址
    autoUpdater.setFeedURL(feedUrl);
    // console.log(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('close', (event) => {
        if (!canQuit) {
            mainWindow.hide();
            mainWindow.setSkipTaskbar(true);
            event.preventDefault();
        }
    });

    //监听下载完成事件
    autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl) {
        sendUpdateMessage({
            cmd: 'update-downloaded',
            message: {
                releaseNotes,
                releaseName,
                releaseDate,
                updateUrl
            }
        })
        //退出并安装更新包
        if (process.platform !== 'darwin') {
            canQuit = true;
            autoUpdater.quitAndInstall();
        }
        // autoUpdater.quitAndInstall();
    });
 
    //接收渲染进程消息，开始检查更新
    ipcMain.on("checkForUpdate", (e, arg) => {
        //执行自动更新检查
        // sendUpdateMessage({cmd:'checkForUpdate',message:arg})
        if(arg){
            autoUpdater.autoDownload = true;
        }
        autoUpdater.checkForUpdates();
    })
}
//给渲染进程发送消息
function sendUpdateMessage(text) {
    mainWindow.webContents.send('message', text)
}

三、解释

其实electron更新的原理就是使用本地的版本号去比对线上服务器的安装包版本，如果线上的版本比本地的高则会触发更新，那么安装包的版本号在哪里呢？就在package.json中：

{
"version": "0.3.0",
......
}

但是这里配置了版本还不够，我们需要在vue.config.js中配置:

 "publish": [
          {
            "provider": "generic",
            "url": "https://服务器Ip或域名/update/"//比如安装包跟latest.yml放在服务器地址的update文件夹下
          }
        ],

只有配置了这个，在打包的时候才会产生latest.yml这个文件，这个文件就是对你安装包版本的一个描述，在进行版本比对的时候 其实就是在读取这个文件的内容
在vue.config.js中:

 const { defineConfig } = require('@vue/cli-service')
const path = require('path');
function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}
module.exports = defineConfig({
  pluginOptions: {
    electronBuilder:{
      customFileProtocol: "./",
      builderOptions:{
        nsis:{
          allowToChangeInstallationDirectory:true,
          oneClick:false
        },
        asar: false,
        "publish": [
          {
            "provider": "generic",
            "url": "https://ntsfpc.ireql.com/update/"
          }
        ],
      }
    }
  },
  transpileDependencies: true,
  devServer: { // 本地配置
    open: false // 是否自动打开浏览器
  },
})

四、引用update.js并且开启检查更新

1.在background.js中 引入update.js

const {
	updateHandle
} = require('@/utils/update.js') 

...
updateHandle(win, "https://服务器Ip或域名/update/") ;

2.在app.vue中启动检查更新:

 this.$nextTick(()=>{
      window.ipcRenderer.send("checkForUpdate", "参数值");//这里是我在main.js中把ipcRenderer挂载到windows上了
    })