electron-vue 更新踩坑

import { autoUpdater } from 'electron-updater'
//因为要和渲染器进程通信 所以引入
import { ipcMain } from 'electron'
const fs = require('fs-extra')
const path = require('path')
const log = require('electron-log')   //日志打印方便查看

//定义状态
const MESSAGE = {
  error: {
    status: 0,
    text: '检查更新出错'
  },
  checking: {
    status: 1,
    text: '正在检查更新……'
  },
  updateAva: {
    status: 2,
    text: '检测到新版本'
  },
  updateNotAva: {
    status: 3,
    text: '现在使用的就是最新版本，不用更新'
  }
}

贴上主要代码

class Update {
//将该窗口对象作为参数
  constructor(mainWindow) {
    this.mainWindow = mainWindow
    this.updaterCacheDir = 'xxxx'   //更新下载产生的文件目录名 要与packjson 里的name 一致
    this.uploadUrl = 'xxxx';   //更新服务器的地址
    this.init()
    this.onError()
    this.onCheckUpdate()
    this.onCheckFound()
    this.onNoCheckFound()
    this.onDownloadProcess()
    this.onUpdateComplate()
    this.onDownload()
  }
  sendUpdateMessage(text) {
    this.mainWindow.webContents.send('message', text)
  }
  init() {
    autoUpdater.setFeedURL(this.uploadUrl)
    autoUpdater.autoDownload = false
    log.transports.console.level = false
    log.transports.console.level = 'silly'
    autoUpdater.logger = log
    const updatePendingPath = path.join(autoUpdater.app.baseCachePath, this.updaterCacheDir, 'pending')
    fs.emptyDir(updatePendingPath)    // 每次打开软件时候清空下载更新的目录
    log.warn('下载的更新目录缓存地址:' + updatePendingPath)
  }
  onError() {
    autoUpdater.on('error', error=> {
     this.sendUpdateMessage(MESSAGE.error)
    })
  }
  onCheckUpdate() {
    autoUpdater.on('checking-for-update', _=>{
      log.warn('触发检查更新')
      this.sendUpdateMessage(MESSAGE.checking)
    })
  }
  onCheckFound() {
    autoUpdater.on('update-available', info=> {
      log.warn('检测到新版本')
      this.sendUpdateMessage(MESSAGE.updateAva)
    })
  }
  onNoCheckFound() {
    autoUpdater.on('update-not-available',info=>{
      this.sendUpdateMessage(MESSAGE.updateNotAva)
    })
  }
  // 更新下载进度事件
  onDownloadProcess() {
    autoUpdater.on('download-progress', progressObj=> {
      log.warn(progressObj)
      this.mainWindow.webContents.send('downloadProgress', progressObj)
    })
  }
  onUpdateComplate() {
    autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate)=> {
      ipcMain.on('isUpdateNow', (e, arg) => {
        autoUpdater.quitAndInstall()
        this.mainWindow.destroy()
      })
      this.mainWindow.webContents.send('isUpdateNow')
    })
  }
  onDownload() {
    ipcMain.on('downloadUpdate', () => {
      log.warn('触发下载')
      autoUpdater.downloadUpdate()
    })
  }
}

export default Update

回到主进程的js文件里引入

import Update from 'xxxx'
new Update(mainWindow);  

回到渲染页面 App.vue引入 ipcRenderer 进行监听就行了
ui用的element-ui 就不贴代码了很简单

注意事项
1.之前一只在本地运行项目 我说怎么触发的更新事件都是报错 原来是要打包好了运行才可以正常触发
2.就是注意下electron的版本 之前是老版本1.x.x的版本 也是报错 后面更新到^3.0.0就ok了，还有electron-updater 的版本我这里是^4.1.2