electron-vue实现自动更新功能

左手的ㄟ右手 2022-12-08 13:00 1249阅读 0赞

electron-vue项目很多时候需要自动更新的功能，避免每次发版都要单独发安装包的尴尬，下面介绍一下如何利用electron-updater来实现自动更新

一、 首先是安装，安装方式很多，不多说，这里需要注意的是electron-updater、electron以及electron-builder版本之间的兼容性

由于git上下来的electron-vue项目electron版本比较低为2x版本，所以对于版本比较高的electron-updater是不支持的，这里推荐使用3x到4x之间的electron-updater版本，当然也可以提升electron的版本来适配electron-updater，通过测试目前7x一下的electron版本是对electron-updater兼容比较好的，

这里选用的版本分别是：electron-updater----3.0.0、electron----7.3.3、electron-builder---20.19.2

好，版本选定后可以安装一下了，首先在package.json中"devDependencies"下添加"electron-updater": "^3.0.0",然后把electron的版本改为7.3.3既："electron": "^7.3.3","electron-builder": "^20.19.2",

实例如下：

"devDependencies": {
        "electron-updater": "^3.0.0",
        "electron": "^7.3.3",
        "electron-builder": "^20.19.2",
      }

之后要在package.json中的build添加publish字段，用来设置自动更新地址和生成yml文件，如下：

"publish": [
        {
          "provider": "generic",
          "url": "http://www.8888888.com/ceshi/" //这里指向存放的目录而非文件
        }
     ],

修改并保存后，进入文件夹，把node\_modules依赖包手动删除或者命令行删除都可以，删除后重新npm i一下依赖包

二、OK炒菜需要的菜品已经齐全，下一步就开始炒菜

1.在src\\renderer下创建一个文件夹untils并在改文件夹下创建一个Update.js的文件，文件内容如下

import {
        autoUpdater
    } from 'electron-updater'
     
    import {
        ipcMain
    } from 'electron'
    let mainWindow = null;
    export function updateHandle(window, feedUrl) {
        mainWindow = window;
        let message = {
            error: '检查更新出错',
            checking: '正在检查更新……',
            updateAva: '检测到新版本，正在下载……',
            updateNotAva: '现在使用的就是最新版本，不用更新',
        };
        //设置更新包的地址
        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('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl) {
            sendUpdateMessage({
                cmd: 'update-downloaded',
                message: {
                    releaseNotes,
                    releaseName,
                    releaseDate,
                    updateUrl
                }
            })
            //退出并安装更新包
            autoUpdater.quitAndInstall();
        });
     
        //接收渲染进程消息，开始检查更新
        ipcMain.on("checkForUpdate", (e, arg) => {
            //执行自动更新检查
            autoUpdater.checkForUpdates();
        })
    }
    //给渲染进程发送消息
    function sendUpdateMessage(text) {
        mainWindow.webContents.send('message', text)
    }

这个文件是处理自动更新逻辑的，包括更新各个过程，建好后进入到主进程index.js中引入这个文件，并触发里面的函数，如下

import { app, BrowserWindow, Menu } from 'electron'
    import {updateHandle} from '../renderer/utils/Update.js';
    
    let mainWindow
    const winURL = process.env.NODE_ENV === 'development'
      ? `http://localhost:9080`
      : `file://${__dirname}/index.html`
    
    function createWindow() {
      mainWindow = new BrowserWindow({
        useContentSize: true,
        minWidth: 930,
        minHeight: 565,
        webPreferences: {
          nodeIntegration: true
        }
      })
      mainWindow.loadURL(winURL) 
      let feedUrl = "http://www.88888888.com/ceshi/";
      //检测版本更新
      updateHandle(mainWindow,feedUrl);
      mainWindow.on('closed', () => {
        mainWindow = null
      })
    }

上面只是简单例子，其他内容自行添加

之后就可以在rander进程中监听并触发自动更新了，在什么时候触发自行考量，这里举例为在app.vue中，如下

<template>
      <div id="app">
        <router-view></router-view>
        <el-dialog
          title="正在更新版本,请稍后 ···"
          :visible.sync="dialogVisible"
          width="60%"
          :close-on-click-modal="closeOnClickModal"
          :close-on-press-escape="closeOnPressEscape"
          :show-close="showClose"
          center
        >
          <div style="width:100%;height:5vh;line-height:5vh;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>
      </div>
    </template>
    
    <script>
    const { ipcRenderer } = require('electron')
    let self = this;
    //接收主进程版本更新消息
    ipcRenderer.on("message", (event, arg) => {
      // console.log(arg);
      if ("update-available" == arg.cmd) {
        //显示升级对话框
        self.dialogVisible = true;
      } else if ("download-progress" == arg.cmd) {
        // console.log(arg.message.percent);
        let percent = Math.round(parseFloat(arg.message.percent));
        self.percentage = percent;
      } else if ("error" == arg.cmd) {
        self.dialogVisible = false;
        self.$message(arg);
      } else if ("update-not-available" == arg.cmd) {
        // self.$message(arg);
      }
    });
    //开始检测新版本
    let timeOut = window.setTimeout(() => {
      ipcRenderer.send("checkForUpdate");
      // console.log('开始检测更新触发')
    }, 500);
    clearTimeout;
    export default {
      name: "globalquickseek",
      data() {
        return {
          dialogVisible: false,
          closeOnClickModal: false,
          closeOnPressEscape: false,
          showClose: false,
          percentage: 0,
          strokeWidth:200
        };
      },
      mounted() {
        self = this;
      },
      destroyed() {
        window.clearInterval(interval);
        window.clearInterval(timeOut);
      }
    };
    </script>
    
    <style>
    /* CSS */
    #app {
      height: 100%;
      overflow: hidden;
    }
    #app>div{
      overflow: hidden;
    }
    .tableList {
      widows: 150px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .el-tooltip__popper{
      font-size: 14px;
      max-width: 300px !important;
      text-align: justify;
      text-justify: newspaper;
      word-break: break-all;
      line-height: 20px;
    }
    </style>

ok，至此配置就已经结束了，下面就可以尝试自动升级了，先打包一个低版本的，既：package.json中version字段写为：0.0.1，打包完毕之后安装应用，安装完成之后再打包个高版本的，既：package.json中version字段写为：0.0.2，然后把打包后的高版本的.exe文件和yml文件上传至你上面配置的那个网址，传完之后打开刚才安装的.exe应用，感受自动升级的方便吧

备注：这里需要注意的是苹果版本需要上传的文件要多一些，把zip格式的也要传至服务器，另外，mac打包的时候需要代码签名才能更好的实现自动更新，否则在执行quitAndInstall方法时会跳出，具体代码签名我下一篇文章再写吧，这一篇有点长了