electron-vue使用electron-updater实现自动更新(windows)

今天呢，给大家带来一篇干货满满的electron-vue自动升级的教程，话不多说，开始我的表演!

---

配置文件 "package.json"

"build" : {
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:3000/newfile/" // 被更新文件存放位置
      }
    ],
},
"devDependencies": {
    "electron": "^2.0.4",
    "electron-updater": "3.0.0",
    "electron-builder": "^20.19.2"
}

build字段详细配置

安装依赖

需要注意的是electron-vue中目前是使用electron 2.0.4的，所以最新版的electron-updater是不支持的，若手动升级electron版本的话，如果你使用了node-ffi等的话,是无法运行的,但是如果你只是使用node-ffi的话可以切换成node-ffi-napi然后对electron进行升级
yarn add electron-updater@3.0.0 --dev(推荐)
npm i electron-updater@3.0.0 -D
cnpm i electron-updater@3.0.0 -D

自动更新 "update.js"

import { autoUpdater } from 'electron-updater'
import { ipcMain } from 'electron'
/**
 * -1 检查更新失败 0 正在检查更新 1 检测到新版本，准备下载 2 未检测到新版本 3 下载中 4 下载暂停 5 下载暂停恢复 6 下载完成 7 下载失败 8 取消下载
 * */
class Update {
  mainWindow
  constructor (mainWindow) {
    this.mainWindow = mainWindow
    autoUpdater.setFeedURL('http://127.0.0.1:3000/newfile') 
    /**
    * 根据自身需求选择下方方法
    */
    this.error()
    this.start()
    this.allow()
    this.unallowed()
    this.listen()
    this.download()
  }
  Message (type, data) {
    this.mainWindow.webContents.send('message', type, data)
  }
  error () { // 当更新发生错误的时候触发。
    autoUpdater.on('error', (err) => {
      this.Message(-1, err)
      console.log(err)
    })
  }
  start () { // 当开始检查更新的时候触发
    autoUpdater.on('checking-for-update', (event, arg) => {
      this.Message(0)
    })
  }
  allow () { // 发现可更新数据时
    autoUpdater.on('update-available', (event, arg) => {
      this.Message(1)
    })
  }
  unallowed () { // 没有可更新数据时
    autoUpdater.on('update-not-available', (event, arg) => {
      this.Message(2)
    })
  }
  listen () { // 下载监听
    autoUpdater.on('download-progress', () => {
      this.Message('下载进行中')
    })
  }
  download () { // 下载完成
    autoUpdater.on('update-downloaded', () => {
      this.Message(6)
      setTimeout(m => {
        autoUpdater.quitAndInstall()
      }, 1000)
    })
  }
  load () { // 触发器
    autoUpdater.checkForUpdates()
  }
}
export default Update

update配置
若对class写法不是很熟悉的同学，可以参考阮一峰老师的es6课程class
在下载中的时候有一个问题就是下载非差异文件的时候不会触发下载监听，点击查看
下载如果没有使用autoUpdater.setFeedURL来设置更新地址,会使用build.publish[x].url来做为更新地址使用

主进程 "index.js"

import Update from './update'
  mainWindow = new BrowserWindow({
  height: 563,
  useContentSize: true,
  width: 1000
})
let update = new Update(mainWindow)

下面对比较常见的一些bug进行一下处理

At least electron-updater 4.0.0 is recommended by current electron-builder version. Please set electron-updater version to "^4.0.0"

electron-updater 安装在dependencies了，在package.json中将他移动到devDependencies

Error: This file could not be downloaded, or the latest version (from update server) does not have a valid semver version: "null"

这个是因为重定向的问题,我在阿里云解析的域名,将我的域名:端口号重定向到了一个新域名,当我更新的时候,在/node_modules/electron-updater/out/AppUpdater.js中打印发现并没有获取到版本信息,而是获取到一个html文件,中间夹着一个iframe然后我改用域名:端口的形式发现可以正常访问