electron-updater實現更新electron應用程序
第一步
-
安裝 "electron-updater": "^4.3.5", -
打開 package.json文件在build對象下添加publish配置，
"build": {
"productName": "xxx", "appId": "org.simulatedgreg.electron-vue", "directories": { "output": "build" }, --------------------------------------------- "publish": [ { "provider": "generic", "url": "https://xxx.com" //注：這個url就是放.yml文件和安裝包的服務器地址,我這里用的是阿里雲oss地址 } ], -------------------------------------------------- "files": [ "dist/electron/**/*" ] 第二步
-
在main文件夾下面創建更新文件 update.js
import { autoUpdater } from 'electron-updater'
import { ipcMain } from 'electron' let mainWindow = null; export function updateHandle(window, feedUrl) { mainWindow = window; let message = { error: '檢查更新出錯', checking: '正在檢查更新', updateAva: '檢測到新版本，正在下載', updateNotAva: '您已經更新到最新版本了', }; //設置更新包的地址 autoUpdater.setFeedURL(feedUrl); //監聽升級失敗事件 autoUpdater.on('error', function (error) { sendUpdateMessage({ cmd: 'error', message: error }) }); //監聽開始檢測更新事件 autoUpdater.on('checking-for-update', function (message) { sendUpdateMessage({ cmd: 'checking-for-update', message: message }) }); //監聽發現可用更新事件 autoUpdater.on('update-available', function (message) { sendUpdateMessage({ cmd: 'update-available', message: message }) }); //監聽沒有可用更新事件 autoUpdater.on('update-not-available', function (message) { sendUpdateMessage({ cmd: 'update-not-available', message: message }) }); // 更新下載進度事件 autoUpdater.on('download-progress', function (progressObj) { sendUpdateMessage({ cmd: 'download-progress', message: progressObj }) }); //監聽下載完成事件 autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl) { sendUpdateMessage({ cmd: 'update-downloaded', message: { releaseNotes, releaseName, releaseDate, updateUrl } }) //退出並安裝更新包 autoUpdater.quitAndInstall(); }); //接收渲染進程消息，開始檢查更新 ipcMain.on("checkForUpdate", (e, arg) => { //執行自動更新檢查 // sendUpdateMessage({cmd:'checkForUpdate',message:arg}) autoUpdater.checkForUpdates(); }) } //給渲染進程發送消息 function sendUpdateMessage(text) { mainWindow.webContents.send('message', text) } -
在main文件夾下面的 index.js中引入update.js
import { updateHandle } from './update'
mainWindow.on('closed', () => { mainWindow = null }) ---------------------------------------------------- let feedUrl = "https://xxxxx.com"; updateHandle(mainWindow,feedUrl); ----------------------------------------------------- } 第三步
-
在 APP.js文件中檢測更新
<template>
<div id="app"> <router-view></router-view> <el-dialog title="正在更新新版本,請稍候..." :visible.sync="dialogVisible" width="60%" :close-on-click-modal="closeOnClickModal" :close-on-press-escape="closeOnPressEscape" :show-close="showClose" center > <div style="width:100%;height:15vh;line-height:15vh;text-align:center"> <el-progress status="success" :text-inside="true" :stroke-width="20" :percentage="percentage" :width="strokeWidth" :show-text="true" ></el-progress> </div> </el-dialog> </div> </template> <script> let ipcRenderer = require("electron").ipcRenderer; let _this = this; //接收主進程版本更新消息 ipcRenderer.on("message", (event, arg) => { // for (var i = 0; i < arg.length; i++) { console.log(arg); if ("update-available" == arg.cmd) { //顯示升級對話框 _this.dialogVisible = true; } else if ("download-progress" == arg.cmd) { //更新升級進度 /** * * message{bytesPerSecond: 47673 delta: 48960 percent: 0.11438799862426002 total: 42801693 transferred: 48960 } */ console.log(arg.message.percent); let percent = Math.round(parseFloat(arg.message.percent)); _this.percentage = percent; } else if ("error" == arg.cmd) { _this.dialogVisible = false; _this.$message("更新失敗"); } // } }); ipcRenderer.send("checkForUpdate"); //20秒后開始檢測新版本 // let timeOut = window.setTimeout(() => { // ipcRenderer.send("checkForUpdate"); // }, 20000); clearTimeout; //間隔1小時檢測一次 // let interval = window.setInterval(() => { // ipcRenderer.send("checkForUpdate"); // }, 3600000); export default { name: 'App', data() { return { dialogVisible: false, closeOnClickModal: false, closeOnPressEscape: false, showClose: false, percentage: 0, strokeWidth:200 }; }, mounted() { _this = this; }, destroyed() { window.clearInterval(interval); window.clearInterval(timeOut); } } </script> 第四步
將項目打包yarn build,將打包后生成的build目錄下的latest.yml和安裝包.exe文件傳入服務器即可
坑！！！
注：我在開發的時候遇到了一個坑，打包成功后打開項目報錯 A JavaScript error occurrend in the main process
這是electron版本過低導致的，后來我將版本升級到4.0.1，再打包就正常運行了。
本文使用 mdnice 排版