一。安装插件

npm install electron-updater

二。添加以下Updater.js

/**
 * Auto Updater
 * 自动更新
 * npm install electron-updater
 */
const { app, ipcMain } = require('electron')
import { autoUpdater } from 'electron-updater'

// 更新地址
const updateUrl = 'http://192.168.0.182:8081/download/desktop_client/'
// 主窗体引用
let mainWindow = null
/**
 * 返回信息结构
 */
const returnData = {
  error: { status: -1, msg: '检测更新查询异常' },
  checking: { status: 0, msg: '正在检查应用程序更新' },
  updateAva: { status: 1, msg: '检测到新版本，正在下载,请稍后' },
  updateNotAva: { status: -1, msg: '您现在使用的版本为最新版本,无需更新!' }
}
/**
 * 通过main进程发送事件给renderer进程，提示更新信息
 * @param {*} text
 */
const sendUpdateMessage = (text) => {
  mainWindow.webContents.send('updateMessage', text)
}
/**
 * 检查更新
 */
const checkForUpdate = () => {
  autoUpdater.checkForUpdates()
}
/**
 * 初始化组件
 * @param {*} window
 */
const updaterInit = (window) => {
  mainWindow = window
  // 和之前package.json配置的一样
  autoUpdater.setFeedURL(updateUrl)

  // 更新错误
  autoUpdater.on('error', (err_info) => {
    sendUpdateMessage(returnData.error)
  })
  // 检查中
  autoUpdater.on('checking-for-update', () => {
    sendUpdateMessage(returnData.checking)
  })
  // 发现新版本
  autoUpdater.on('update-available', (info) => {
    sendUpdateMessage(returnData.updateAva)
  })
  // 当前版本为最新版本
  autoUpdater.on('update-not-available', (info) => {
    sendUpdateMessage(returnData.updateNotAva)
  })
  // 更新下载进度事件
  autoUpdater.on('download-progress', (progressObj) => {
    /*
    bytesPerSecond: bps/s //传送速率
    percent : 百分比 //我们需要这个就可以了
    total : 总大小
    transferred: 已经下载
    { "bytesPerSecond": 47132710, "delta": 39780007, "percent": 100, "total": 39780007, "transferred": 39780007 }
    */
    mainWindow.webContents.send('downloadProgress', progressObj)
  })

  autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) => {
    autoUpdater.quitAndInstall()
    // ipcMain.on('isUpdateNow', (e, arg) => {
    // // some code here to handle event
    //   autoUpdater.quitAndInstall()
    // })
  // win.webContents.send('isUpdateNow')
  })
  // 渲染进程主动检查更新
  ipcMain.on('checkForUpdate', () => {
    console.log('Active UPDATE')
    checkForUpdate()
  })
  // 程序启动后自动检查更新（不自动更新可以关闭）
  app.on('ready', () => {
    // if (process.env.NODE_ENV === 'production') checkForUpdate()
    checkForUpdate()
  })
}

export default{
  updaterInit,
  checkForUpdate
}

import Updater from './Updater' // 引入更新函数

function createWindow(){
  ...
  mainWindow = new BrowserWindow(...)
  // ----更新服务----------↓
  Updater.updaterInit(mainWindow)
  // ----更新服务----------↑
  ...
}

三。渲染层 AutoUpdater.vue 组件

<template>
  <el-dialog 
    :visible.sync="show" 
    :width="'770px'" 
    top="55vh" 
    custom-class="mds-dialog" 
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @click="close"
    title="应用更新"
    >
    <p>更新进度</p>
    <el-progress :text-inside="true" :stroke-width="26" :percentage="percent"></el-progress>
  </el-dialog>
</template>
<script>
export default {
  name: 'AutoUpdater',
  data() {
    return {
      show: false,
      percent: 0
    }
  },
  mounted() {
    // 更新进度
    this.$electron.ipcRenderer.on('downloadProgress', (event, data) => {
      this.percent = (data.percent).toFixed(2)
      if (data.percent >= 100) {
        // this.show = false;
      }
    })
    /**
    * 主进程返回的检测状态
    */
    this.$electron.ipcRenderer.on('updateMessage', (event, data) => {
      console.info('updateMessage', data)
      switch (data.status) {
        case -1:
          this.$notify.info({ title: '消息', message: data.msg })
          break
        case 0:
          this.$notify.success({ title: '消息', message: data.msg })
          break
        case 1:
          this.show = true
          break
      }
    })
  },
  methods: {
    close() {
      console.info('x')
    }
  }
}
</script>

按钮主动调用检查

const { ipcRenderer: ipc } = require('electron')
ipc.send('checkForUpdate')