vue+electron 自動(dòng)更新的實(shí)現(xiàn)代碼
1. 配置 package.json或vue.config.js文件中的應(yīng)用更新服務(wù)器地址
module.exports = { pluginOptions: { electronBuilder: { ... publish: [ { provider: 'generic', url: 'http://qc***/***' // 服務(wù)器地址 } ] ... } } } }
2. 在主進(jìn)程寫(xiě)更新應(yīng)用邏輯
在 checkupdate.js
文件或 main.js
中寫(xiě)入
import { autoUpdater } from 'electron-updater' const { build } = require("../../../package.json") const { app, dialog } = require('electron'); const path = require("path"); import { ipcRenderer } from "electron"; const websocket = require('ws') //跳過(guò)打包檢查 開(kāi)發(fā)環(huán)境使用 打包的時(shí)候注釋掉 // Object.defineProperty(app, 'isPackaged', { // get() { // return true; // } // }); /** * -1 檢查更新失敗 0 正在檢查更新 1 檢測(cè)到新版本,準(zhǔn)備下載 2 未檢測(cè)到新版本 3 下載中 4 下載完成 **/ class Update { mainWindow constructor() { autoUpdater.setFeedURL(build.publish[0].url) // 當(dāng)更新發(fā)生錯(cuò)誤的時(shí)候觸發(fā)。 autoUpdater.on('error', (err) => { if (err.message.includes('sha512 checksum mismatch')) { this.Message(this.mainWindow, -1, 'sha512校驗(yàn)失敗') } else { this.Message(this.mainWindow, -1, '錯(cuò)誤信息請(qǐng)看主進(jìn)程控制臺(tái)') } }) // 當(dāng)開(kāi)始檢查更新的時(shí)候觸發(fā) autoUpdater.on('checking-for-update', (event, arg) => { this.timer(this.mainWindow, 0, "正在檢查更新...", 5000) }) // 發(fā)現(xiàn)可更新數(shù)據(jù)時(shí) autoUpdater.on('update-available', (event, arg) => { this.timer(this.mainWindow, 1, "發(fā)現(xiàn)新版本", 10000) this.timer(this.mainWindow, 1, "檢測(cè)到新版本,正在下載安裝包...", 15000) }) // 沒(méi)有可更新數(shù)據(jù)時(shí) autoUpdater.on('update-not-available', (event, arg) => { this.timer(this.mainWindow, 2, "暫未檢測(cè)到新版本,當(dāng)前版本為最新版本,無(wú)需更新", 15000) }) // 下載監(jiān)聽(tīng) autoUpdater.on('download-progress', (progressObj) => { // { // total: 1145589126, // delta: 71139212, // transferred: 71139212, // percent: 6.209836527376395, // bytesPerSecond: 69881348 // } let total = this.renderSize(progressObj.total); //總大小 let percent = parseFloat(progressObj.percent.toFixed(2)); //下載進(jìn)度 let bytesPerSecond = this.renderSize(progressObj.bytesPerSecond); //下載速度 // let message = `總大小:${total} 下載進(jìn)度:${percent}% 下載速度${bytesPerSecond}/S` let message = `總大?。?{total} 下載進(jìn)度:${percent}%` // this.Message(this.mainWindow, 3, message) }) // 下載完成 autoUpdater.on('update-downloaded', () => { // console.log('done') this.Message(this.mainWindow, 4, "新版本已下載完成,五秒后自動(dòng)安裝并重啟...") setTimeout(() => { this.quitInstall(); }, 5000) }) } // 負(fù)責(zé)向渲染進(jìn)程發(fā)送信息 Message(mainWindow, type, data) { const senddata = { state: type, msg: data || '' } let journalSocket = new websocket("ws://localhost:16478"); // mainWindow.webContents.send('update-msg', senddata) journalSocket.on("open", function () { journalSocket.send(data); }); } // 執(zhí)行自動(dòng)更新檢查 checkUpdate(mainWindow) { this.mainWindow = mainWindow autoUpdater.updateConfigPath = path.resolve(__static, 'default-app-update.yml') // this.Message(this.mainWindow, 4, path.resolve(__static, 'default-app-update.yml')) // autoUpdater.currentVersion = "0.0.1";//調(diào)試使用 正式上線后注釋掉 autoUpdater.checkForUpdates().catch(err => { console.log('網(wǎng)絡(luò)連接問(wèn)題', err) }) } // 退出并安裝 quitInstall() { autoUpdater.quitAndInstall() } // 處理文件大小格式化 renderSize(value) { if (null == value || value == '') { return "0 Bytes"; } var unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"); var index = 0; var srcsize = parseFloat(value); index = Math.floor(Math.log(srcsize) / Math.log(1024)); var size = srcsize / Math.pow(1024, index); size = size.toFixed(2);//保留的小數(shù)位數(shù) return size + unitArr[index]; } // 定時(shí)器 timer(mainWindow, number, message, time) { setTimeout(() => { this.Message(mainWindow, number, message) }, time) } } export default Update
3. 打包升級(jí)版的應(yīng)用(v1.1.0)
注意:
每次打包記得去package.json文件中修改version版本號(hào),這樣系統(tǒng)才會(huì)檢測(cè)到最新版本
打包后 dis有如下兩個(gè)文件:
新版本安裝包.exe
latest.yml
將上面兩個(gè)文件復(fù)制到 ‘更新服務(wù)器’ (http://qc***/***) 目錄下;
以后每次有更新就復(fù)制這兩個(gè)文件至 ‘更新服務(wù)器’,舊版本的應(yīng)用的執(zhí)行文件(.exe)可以刪除。
到此這篇關(guān)于vue+electron 自動(dòng)更新的文章就介紹到這了,更多相關(guān)vue electron 自動(dòng)更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實(shí)現(xiàn)購(gòu)物車(chē)基本功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購(gòu)物車(chē)的基本功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11Vue 計(jì)數(shù)器的實(shí)現(xiàn)
這篇文章主要介紹了Vue 計(jì)數(shù)器的實(shí)現(xiàn),主要利用HTML實(shí)現(xiàn)步驟現(xiàn)在頁(yè)面上簡(jiǎn)單實(shí)現(xiàn)一個(gè)計(jì)數(shù)器,內(nèi)容簡(jiǎn)單且詳細(xì),需要的朋友可以參考一下2021-10-10Vue3+Element+Ts實(shí)現(xiàn)表單的基礎(chǔ)搜索重置等功能
本文主要介紹了Vue3+Element+Ts實(shí)現(xiàn)表單的基礎(chǔ)搜索重置等功能,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12vue項(xiàng)目input標(biāo)簽checkbox,change和click綁定事件的區(qū)別說(shuō)明
這篇文章主要介紹了vue項(xiàng)目input標(biāo)簽checkbox,change和click綁定事件的區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)
這篇文章主要介紹了vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue3路由進(jìn)階實(shí)戰(zhàn)教程之參數(shù)傳遞與導(dǎo)航守衛(wèi)核心技術(shù)
本文介紹了路由參數(shù)傳遞的進(jìn)階應(yīng)用技巧,包括路由配置與參數(shù)驗(yàn)證、組件參數(shù)接收、查詢參數(shù)傳遞、導(dǎo)航守衛(wèi)以及性能優(yōu)化與最佳實(shí)踐,感興趣的朋友一起看看吧2025-03-03解決el-select數(shù)據(jù)量過(guò)大的3種方案
最近做完一個(gè)小的后臺(tái)管理系統(tǒng),快上線了,發(fā)現(xiàn)一個(gè)問(wèn)題,有2個(gè)select的選項(xiàng)框線上的數(shù)據(jù)量是1w+,而測(cè)試環(huán)境都是幾百的,所以導(dǎo)致頁(yè)面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下2023-09-09