本文主要簡述使用electron-builder配合electron-updater是如何實現自動更新的。
早在節前就走完了流程，后來工作上事情較多就沒來得及及時更新。好了，接下來就進入正題吧。
1，首先得使用vue-electron腳手架快速搭建一個項目，如果還沒有的話，可以參考我的上一篇文章vue-electron腳手架安裝及說明
不過值得注意的是這一次構建的項目，這里要使用electron-builder了，注意不要選擇錯了。
剩下的都按照vue-electron腳手架安裝及說明操作即可。
2.搭建完項目后，開始安裝 electron-updater 包模塊。
cd 到項目目錄，輸入命令$npm?install?electron-updater?--save
3.配置package.json文件
為了打包時生成latest.yml文件，需要在 build 參數中添加 publish 配置。
其中這個url地址就是放.exe和latest.yml文件的地址。這里我啰嗦一句吧，我是使用Tomcat來代替遠程服務器地址的，把打包生成的.exe和latest.yml文件統一放在了verson文件夾下的，其中latest.yml是用于作版本比較使用的。
4.在主進程添加以下代碼，可以放在main文件夾下的index.js內
import { autoUpdater } from 'electron-updater'
import{ ipcMain } from 'electron'
// 檢測更新，在你想要檢查更新的時候執行
!function updateHandle() {
? ? let message = {
? ? ? ? error: '檢查更新出錯',
? ? ? ? checking: '正在檢查更新……',
? ? ? ? updateAva: '檢測到新版本，正在下載……',
? ? ? ? updateNotAva: '現在使用的就是最新版本，不用更新',
? ? };
? ? const os = require('os');
? ? const uploadUrl = "http://localhost:8080/verson/"; // 下載地址，不加后面的.exe
? ? autoUpdater.setFeedURL(uploadUrl);
? ? autoUpdater.on('error', function (error) {
? ? ? ? sendUpdateMessage(message.error)
? ? });
? ? autoUpdater.on('checking-for-update', function () {
? ? ? ? sendUpdateMessage(message.checking)
? ? });
? ? autoUpdater.on('update-available', function (info) {
? ? ? ? sendUpdateMessage(message.updateAva)
? ? });
? ? autoUpdater.on('update-not-available', function (info) {
? ? ? ? sendUpdateMessage(message.updateNotAva)
? ? });
// 更新下載進度事件
? ? autoUpdater.on('download-progress', function (progressObj) {
? ? ? ? mainWindow.webContents.send('downloadProgress', progressObj)
? ? })
? ? autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
? ? ? ? ipcMain.on('isUpdateNow', (e, arg) => {
? ? ? ? ? ? console.log(arguments);
? ? ? ? console.log("開始更新");
? ? ? ? //some code here to handle event
? ? ? ? autoUpdater.quitAndInstall();
? ? });
? ? mainWindow.webContents.send('isUpdateNow')
});
ipcMain.on("checkForUpdate",()=>{
? ? //執行自動更新檢查
? ? autoUpdater.checkForUpdates();
})
}()
// 通過main進程發送事件給renderer進程，提示更新信息
function sendUpdateMessage(text) {
? ? mainWindow.webContents.send('message', text)
}
需要注意的是下載地址uploadUrl不要忘記更改成自己的。
5.渲染進程增加檢查更新代碼。我是放在.vue頁面了，因為我是加了個點擊檢查更新項。
methods:內
checkUpdateVersion:function () {
const _this =this
? ? _this.$electron.ipcRenderer.send("checkForUpdate");
? ? _this.$electron.ipcRenderer.on("message", (event, text) => {
console.log(arguments);
? ? ? ? _this.tips = text;
? ? ? ? // alert(text)
? ? });
? ? _this.$electron.ipcRenderer.on("downloadProgress", (event, progressObj)=> {
console.log(progressObj);
? ? ? ? _this.downloadPercent = progressObj.percent ||0;
? ? });
? ? _this.$electron.ipcRenderer.on("isUpdateNow", () => {
_this.$electron.ipcRenderer.send("isUpdateNow");
? ? });
}
注意點：checkUpdateVersion是我自定義的方法，當然也可以一進來就在created()函數內調用，或者手動調用該方法檢查更新。至于tips、downloadPercent，分別是渲染進程和主進程通訊時傳過來的message和下載進度，在data內先定義這兩個屬性為空字符串即可。
6.cd 到項目根目錄，$npm run build?
完成后，會在build文件夾內生成相關文件，其中就包括.exe和latest.yml文件
7.更改package.json內version（版本號）為更高版本，重復第6步
8將高版本的.exe和latest.yml文件放到uploadUrl的地址，我是http://localhost:8080/verson/
9.$npm run dev 點擊檢查更新即可查看是否更新到最新版
ps：這篇文章主要是針對Windows平臺，如果是Mac的話，打包時候呢是需要代碼簽名的，我是在Mac嘗試過，但是在使用Xcode生成Developer ID Application時候卡住了，因為最近蘋果不知道又增加了什么隱私條款，需要同意并重新驗證蘋果開發者賬號，恰巧驗證問題我一個都不記得了，有點悲劇。
參考文檔：https://segmentfault.com/a/1190000012904543
? ? ? ? ? ? ? ? ? https://segmentfault.com/a/1190000012902525
