electron-vue+electron-updater實(shí)現(xiàn)自動(dòng)更新(步驟源碼)
1、編寫語(yǔ)言:electron、vue
2、更新庫(kù):"electron-updater": "4.3.5"
下面直接上步驟源碼
1、autoUpdater.js (操控更新js文件)
import { autoUpdater } from 'electron-updater' import { app, ipcMain } from 'electron' // 服務(wù)器靜態(tài)文件地址,文章后面附上ng配置及需要上傳的文件 const updateUrl = 'http://***/updateExe/' // 檢測(cè)更新,在你想要檢查更新的時(shí)候執(zhí)行,renderer事件觸發(fā)后的操作自行編寫 function updateHandle (updateConfig) { let message = { error: '檢查更新出錯(cuò)', checking: '正在檢查更新……', updateAva: '檢測(cè)到新版本,正在下載……', updateNotAva: '現(xiàn)在使用的就是最新版本,不用更新' } // 設(shè)置是否自動(dòng)下載,默認(rèn)是true,當(dāng)點(diǎn)擊檢測(cè)到新版本時(shí),會(huì)自動(dòng)下載安裝包,所以設(shè)置為false autoUpdater.autoDownload = false // 設(shè)置服務(wù)器更新地址 autoUpdater.setFeedURL({ provider: 'generic', url: updateUrl }) autoUpdater.on('error', function (err) { sendUpdateMessage('error',err||message.error) }) autoUpdater.on('checking-for-update', function () { sendUpdateMessage('checking-for-update',message.checking) }) // 版本檢測(cè)結(jié)束,準(zhǔn)備更新 autoUpdater.on('update-available', function (info) { sendUpdateMessage('update-available',message.updateAva) }) autoUpdater.on('update-not-available', function (info) { sendUpdateMessage('update-not-available',message.updateNotAva) }) // 更新下載進(jìn)度事件 autoUpdater.on('download-progress', function (progressObj) { sendUpdateMessage('download-progress',progressObj.percent) }) // 下載完成 autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) { sendUpdateMessage('update-downloaded','下載完成') }) // 通過(guò)main進(jìn)程發(fā)送事件給renderer進(jìn)程,提示更新信息 function sendUpdateMessage (name,text) { // 窗口對(duì)象自行修改 let loginWindow = global.browserList.logins[0] loginWindow.webContents.send('UpdateMessage', {name,text}) } } // 觸發(fā)更新檢測(cè) ipcMain.on('checkForUpdates', () => { autoUpdater.checkForUpdates() }) // 開(kāi)始下載,通過(guò)渲染進(jìn)程發(fā)起 ipcMain.on('downloadUpdate', () => { autoUpdater.downloadUpdate() }) // 下載完成,退出且重新安裝 ipcMain.on('updateSuccess', () => { // 加載更新程序 autoUpdater.quitAndInstall() // 關(guān)閉當(dāng)前electron app.quit() }) export default updateHandle
2、main.js(也就是package.json內(nèi)的main指向的js文件)
import updateHandle from '@/mainFolder/util/autoUpdater.js' //自動(dòng)更新 // ... 省略其次代碼,為了更新代碼更明了 //自動(dòng)更新 updateHandle()
3、update.vue(可視化更新頁(yè)面vue + iview,不同的自行封寫)
<template> <div> <Modal v-model="modal" :mask-closable='false' :title="'更新提醒(' + newVersion +')'" width="400" ok-text="立即更新" cancel-text="取消" :closable='false' @on-ok='updataDown' > <p v-for='(item, index) in navJson' :key='index + "navJson"'>{{ index+1 }}、{{item}}</p> </Modal> <Modal v-model="Progress" :mask-closable='false' :title="'正在更新(' + newVersion +')'" width="400" :closable='false' > <Progress :percent="percent" status="active" ></Progress> <div slot="footer"> </div> </Modal> </div> </template> <script> // this.$ipcRenderer 等同于 window.require("electron").ipcRenderer export default { data() { return { modal: false, Progress: false, percent: 0, newVersion: '0.0.0', isOnMessage: false, navJson: [] } }, created () { // 在這里執(zhí)行之前,可以是登錄接口查詢到版本不對(duì)之后再觸發(fā)檢測(cè)更新 // ...登錄api省略了,造數(shù)據(jù)演示 let result = { newVersion: '2.0.0', updateNavJson: '["更新內(nèi)容1","更新內(nèi)容2","更新內(nèi)容3","更新內(nèi)容4"]' } this.onUpdateExe(result) }, methods: { onUpdateExe(res) { if (this.isOnMessage) return const { newVersion = '', updateNavJson = "" } = res try { this.navJson = JSON.parse(updateNavJson) || [] } catch (error) { console.log(error) } this.isOnMessage = true this.newVersion = newVersion console.log('收到更新版本號(hào)', res, this.navJson) // 自動(dòng)更新過(guò)程 this.$ipcRenderer.on('UpdateMessage', this.updateExe.bind(this)) // 檢查是否需要更新 this.$ipcRenderer.send('checkForUpdates') }, updateExe(e, data){ console.log('渲染層收到消息:',data) // 更新提示彈窗 if(data.name == 'update-available'){ this.modal = true }else if(data.name == 'download-progress'){ // 下載進(jìn)度 this.percent = Math.ceil(data.text) }else if(data.name == 'update-downloaded'){ this.$Message.success('下載完成,準(zhǔn)備重啟') setTimeout(() => { this.$ipcRenderer.send('updateSuccess') },2000) } }, //開(kāi)始升級(jí) updataDown(){ this.Progress = true this.$ipcRenderer.send('downloadUpdate') } }, } </script> <style lang="scss" scoped> /deep/.ivu-modal-body { max-height: 120px; overflow-y: scroll; padding-top: 5px; p { line-height: 24px; height: 24px; font-size: 12px; } } /deep/.ivu-modal-footer { button:nth-child(1) { display: none; } } </style>
4、config配置增加publish,url:服務(wù)器文件地址
electronBuilder: { builderOptions: { productName: 'soft', // 打包文件名稱,盡可能用英文 // ... publish: [ { "provider": "generic", "url": `http://***/updateExe/` } ], } }
5、服務(wù)器ng配置
// nginx配置靜態(tài)文件目錄 http { server { # 增加這一個(gè)配置 location /updateExe/ { alias /usr/item/updateExe/; } } }
6、將打包后的exe + latest.yml 傳入/usr/item/updateExe/這個(gè)目錄下
備注:
1、5步驟配置ng靜態(tài)文件訪問(wèn)鏈接,有文件服務(wù)器的可跳過(guò)
2、文章中的 http://***/updateExe/ 的 ***記得替換成服務(wù)器公網(wǎng)ip
效果如下:
到此這篇關(guān)于electron-vue+electron-updater實(shí)現(xiàn)自動(dòng)更新的文章就介紹到這了,更多相關(guān)electron-vue自動(dòng)更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue單頁(yè)面在微信下只能分享落地頁(yè)的解決方案
這篇文章主要介紹了vue單頁(yè)面在微信下只能分享落地頁(yè)的解決方案,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04vue之父子組件間通信實(shí)例講解(props、$ref、$emit)
組件間如何通信,也就成為了vue中重點(diǎn)知識(shí)了。這篇文章將會(huì)通過(guò)props、$ref和 $emit 這幾個(gè)知識(shí)點(diǎn),來(lái)講解如何實(shí)現(xiàn)父子組件間通信。2018-05-05vue項(xiàng)目proxyTable配置小結(jié)
本文主要介紹了vue項(xiàng)目proxyTable配置小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04詳解vue中父子組件傳遞參數(shù)props的實(shí)現(xiàn)方式
這篇文章主要給大家介紹了在vue中,父子組件傳遞參數(shù)?props?實(shí)現(xiàn)方式,文章通過(guò)代碼示例介紹的非常詳細(xì),對(duì)我們的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法
本文主要介紹了Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11