Vue 学习之 Electron 使用github 自动更新

1.安装electron-updater

使用yarn yarn add electron-updater 或者使用 npm npm install electron-updater

2.使能 发布到Github 功能

添加 publish: [‘github’] 到你在vue.config.js 中 Electron Builder 的配置

module.exports = { pluginOptions: { electronBuilder: { builderOptions: { publish: ['github']//此处写入github 就好，不用添加其他内容 } } } }

3.在background.(js|ts) 中添加检测更新

增加检测并更新 ... + 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() } ... 增加更新过程日志 const checkUpdate = (win) =>{ //处理更新操作 const returnData = { error: { status: -1, msg: '更新时发生意外，无法进行正常更新！' }, checking: { status: 0, msg: '正在检查更新……' }, updateAva: { status: 1, msg: '正在升级……' }, updateNotAva: { status: 2, msg: '开始加载程序……' } }; //更新错误事件 autoUpdater.on('error', function (error) { sendUpdateMessage(returnData.error) log.info(returnData.error, error) }); //检查事件 autoUpdater.on('checking-for-update', function () { sendUpdateMessage(returnData.checking) log.info(returnData.checking) }); //发现新版本 autoUpdater.on('update-available', function () { sendUpdateMessage(returnData.updateAva) log.info(returnData.updateAva) }); //当前版本为最新版本 autoUpdater.on('update-not-available', function () { setTimeout(function () { sendUpdateMessage(returnData.updateNotAva) log.info(returnData.updateNotAva) }, 1000); }); //更新下载进度事件 autoUpdater.on('download-progress', function (progressObj) { win.webContents.send('downloadProgress', progressObj) log.info('正在下载',progressObj) }); //下载完毕 // autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) { autoUpdater.on('update-downloaded', function () { //退出并进行安装（这里可以做成让用户确认后再调用） autoUpdater.quitAndInstall(); log.info("下载完毕") }); //发送消息给窗口 function sendUpdateMessage(text) { win.webContents.send('message', text) } }

4.生成GitHub access token

https://github.com/settings/tokens/new 先去生成 token，然后自己复制一下，记得存到记事本，因为只会出现一次加入环境变量 On macOS/linux: export GH_TOKEN="<YOUR_TOKEN_HERE>"

On Windows, run in powershell:

[Environment]::SetEnvironmentVariable("GH_TOKEN","<YOUR_TOKEN_HERE>","User")

然后重启 powershell ，环境变量才会有效

5.添加脚本

然后在package.json中添加

"scripts": { "publish": "vue-cli-service electron:build --win --x64 -p always" }

6.上传GitHub 并发布

上传GitHub

npm run publish or With Yarn: yarn electron:build -p always or with NPM: npm run electron:build -- -p always

发布

在GitHub中打开您的仓库，然后单击发布选项卡。您应该看到包含所有二进制文件的新版本的草稿。发布此版本，以便用户可以对其进行更新。

7.检查更新

安装您的应用程序，然后运行它。您尚未收到更新通知，因为这是最新版本。您必须通过增加中的version字段来发布新版本package.json，然后重复前面的3个步骤。现在，您的旧应用应该会向您发送更新通知。

源码GitHub 参考 https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#auto-update https://www.jianshu.com/p/f6726ada78ff