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

1. https://github.com/settings/tokens/new 先去生成 token，然后自己复制一下，记得存到记事本，因为只会出现一次
2. 加入环境变量
   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