最近研究Electron，涉及到了自动更新，网上教程也不少，但是好多都不可用了，经过了2天的摸索，终于搞定了菜单手动更新或者偷摸自动更新安装。因为我没有MAC，所以这篇文章只针对Windows系统，等我搞到了MAC，我再来一篇关于MAC的文章！

阅读之前，最好先看下官方的一些文档，我这里推荐以下几篇：

vue-cli-plugin-electron-builder：https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#auto-update

官方文档：https://www.electronjs.org/docs/api/auto-updater

electron-build：https://www.electron.build/auto-update

偷摸自动更新

安装依赖：

npm install electron-updater

设置更新服务器地址vue.config.js：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        publish: [{
          "provider": "generic",
          "channel": "latest",
          "url": "http://xxxxxxxx/download/",
        }]
      }
    }
  }
}

自动更新background.js：

...
+  import { autoUpdater } from "electron-updater"
...

if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
+   autoUpdater.checkForUpdatesAndNotify()
  }
...

这样，就完成了自动更新。

菜单手动更新

这里我把菜单和更新操作单独拆分成两段代码来维护，在src下新建文件夹electron，这里会包含menu.js和updater.js。

菜单文件menu.js，这里推荐看官方文档：https://www.electronjs.org/docs/api/menu-item

import { app, shell, Menu } from 'electron'
import {checkForUpdates} from './updater.js';
let template = [
  {
    label: '帮助',
    role: 'help',
    submenu: [
      {
        label: `版本` + app.getVersion(),
        id: 'version',
        click: (e) => {
          checkForUpdates(e)
        }
      },
      {
        label: '学习更多',
        id: 'about',
        click: () => {
          shell.openExternal('https://wangdaodao.com/')
        }
      }
    ]
  }
]

var list = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(list)

然后是更新代码updater.js：

import { dialog } from 'electron'
import { autoUpdater } from 'electron-updater'
let updater
autoUpdater.autoDownload = false

autoUpdater.on('error', (error) => {
  dialog.showErrorBox('Error: ', error == null ? "unknown" : (error.stack || error).toString())
})

autoUpdater.on('update-available', (info) => {
  dialog.showMessageBox({
    type: 'info',
    title: '更新提示',
    message: '发现有新版本'+ info.version +'，是否更新？',
    buttons: ['更新', '不了'],
    cancelId: 1,
  }).then(index => {
    if (index.response == 0) {
      autoUpdater.downloadUpdate();
    }
    else {
      updater.enabled = true
      updater = null
    }
  })
})

autoUpdater.on('update-not-available', () => {
  dialog.showMessageBox({
    title: '提示',
    message: '暂无更新'
  })
  updater.enabled = false
  updater = null
})

autoUpdater.on('update-downloaded', () => {
  dialog.showMessageBox({
    type: 'info',
    title: '安装更新',
    buttons: ['安装', '稍后安装'],
    message: '安装包已经下载完毕，是否现在安装？',
    cancelId: 1,
  }).then(index => {
    if (index.response == 0) {
      autoUpdater.quitAndInstall()
    }
  })
})

// export this to MenuItem click callback
export function checkForUpdates(menuItem, focusedWindow, event) {
  updater = menuItem
  updater.enabled = false
  autoUpdater.checkForUpdates()
}

菜单在background.js中引用，在createWindow()方法中直接require：

require('./electron/menu.js')

监听下载进度，这里推荐看官方文档 https://www.electronjs.org/docs/api/browser-window ：

autoUpdater.on('download-progress', function (progressObj) {
  win.setProgressBar(progressObj.percent.toFixed(2) / 100);
  win.setTitle('已下载：' + progressObj.percent.toFixed(2) + '%')
});

基本上这样就完成了Electron更新了。

关于更新服务器

这里更新服务器只要把打包好的文件，上传到服务器上面，就可以了，对服务器没特殊要求。

对了，整体的代码我已经提交到GitHub上了，是一个Vue + Electron 纯净版本的，后续还会在里面增加一些功能，如果真的能帮助大家，希望能给一个星星。

vue-electron-template

Owner：wangdaodao

Updated：2024-11-07 00:59

Watch：11

Star：11

Fork：4

简单的 Vue + Electron 模板