Electron-vue 系列之自动更新与手动更新

Electron-vue 系列之自动更新与手动更新

一、主要插件

1. electron-builder

npm install electron-builder --save

2. electron-updater

npm install electron-updater --save

二、各项配置

1. package.json中publish配置

代码如下（示例）：

publish:{
   
   
 provider:"generic",
	 // url:"http://xxx.xxx.xxx.xxx/xxx/xxx", 
	 // 升级包在服务器地址，不用指向具体的升级包文件
	 // 在本地起的http服务器
	 url: "http://127.0.0.1:8888/update/client"
},

2. 升级包配置

升级过程中主要是通过比对latest.yml 中的哈希码，如果和本地不同，再去拉去最新的安装包进行安装
因此，需将 electron-builder 打包的以下三个文件放在服务器同一文件夹下，以本地服务器为例，如下：

3. 本地http服务器启动

以本文为例，在update文件上一级目录打开cmd窗口，输入以下命令：

// 端口号 8888
npx http-server -p 8888

使用提供的任一路径均可访问，效果如下：


若服务器出现如下字样，代表链接服务器成功

三、关键代码编写

1. autoUpdate.js 文件

const {
   
   app, ipcMain, BrowserWindow, dialog} = require('electron')
const build = require("../vue.config")
// 注意这个autoUpdater不是electron中的autoUpdater
const {
   
   autoUpdater, CancellationToken} = require('electron-updater')
const logger = require('electron-log')
const {
   
    info } = require('sass')
const path = require('path')
const fs = require('fs-extra')
const serveControll = require("./api/event/serveControll")
// const config = require('../package.json')


// 更新地址
const updateURL = build.pluginOptions.electronBuilder.builderOptions.publish.url // 安装包下载地址
// 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
function handleUpdate(mainWindow, callback) {
   
   
  // 若执行删除操作，每次检查更新都会重新下载更新包，
  // 若不执行删除操作,在已有更新包的情况下,会直接跳过下载事件,直接进行安装操作
  deleteUpdate();

  const message = {
   
   
    error: {
   
   status: -1,msg:'检查更新出错'},
    checking: {
   
   status: 0,msg:'正在检查更新……'},
    updateAva: {
   
   status: 1,msg:'检测到新版本，正在下载……'},
    updateNotAva: {
   
   status: -1,msg:'已经是最新版本'},
    // updateDownload:{
   
   status: 2,msg: '正在下载'}
  }

  // 设置是否自动下载，默认是true,当点击检测到新版本时，会自动下载安装包，所以设置为false
  autoUpdater.autoDownload = false 

  autoUpdater.autoInstallOnAppQuit = false;  // 如果安装包下载好了，当应用退出后是否自动安装更新

  // 设置版本更新服务器地址
  autoUpdater.setFeedURL(updateURL)

  // 更新发生错误时触发
  autoUpdater.on('error', function() {
   
   
    logger.error("检查更新出错")
    sendUpdateMessage(message.error)
  })

  // 开始检查更新事件
  autoUpdater.on('checking-for-update', function() {
   
   
    logger.info("开始检查更新")
    sendUpdateMessage(message.checking)
  })

  // 没有可更新版本
  autoUpdater.on('update-not-available', function(info) {
   
   
    logger.info("已经是最新的版本")
    sendUpdateMessage(message.updateNotAva)
  })

  // 发现可更新版本
  autoUpdater.on('update-available', function(info) {
   
   
    logger.debug("发现新版本")
    logger.info("新版本信息：",info)
    // 获取当前版本信息
    // logger.info("localVersion---->",config.version) 
    sendUpdateMessage(message.updateAva)
    mainWindow.webContents.send('update-available',info);
  })

  // 更新下载进度事件
  autoUpdater.on('download-progress', function(progressObj) {
   
   
    logger.debug('下载进度事件 ... ')
    logger.info("progressObj--->",progressO