electron-vue+electron-updater實(shí)現(xiàn)自動(dòng)更新(步驟源碼)
1、編寫語言:electron、vue
2、更新庫:"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','下載完成')
})
// 通過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()
})
// 開始下載,通過渲染進(jìn)程發(fā)起
ipcMain.on('downloadUpdate', () => {
autoUpdater.downloadUpdate()
})
// 下載完成,退出且重新安裝
ipcMain.on('updateSuccess', () => {
// 加載更新程序
autoUpdater.quitAndInstall()
// 關(guān)閉當(dāng)前electron
app.quit()
})
export default updateHandle2、main.js(也就是package.json內(nèi)的main指向的js文件)
import updateHandle from '@/mainFolder/util/autoUpdater.js' //自動(dòng)更新 // ... 省略其次代碼,為了更新代碼更明了 //自動(dòng)更新 updateHandle()
3、update.vue(可視化更新頁面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)更新過程
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)
}
},
//開始升級(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ù)器的可跳過
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自定義指令實(shí)現(xiàn)前端埋點(diǎn)詳析
埋點(diǎn)分析是網(wǎng)站分析的一種常用的數(shù)據(jù)采集方法,下面這篇文章主要給大家介紹了關(guān)于如何通過Vue自定義指令實(shí)現(xiàn)前端埋點(diǎn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue3?Suspense實(shí)現(xiàn)優(yōu)雅處理異步數(shù)據(jù)加載
Suspense?是?Vue?3?中用于處理異步數(shù)據(jù)加載的特性,它使得在加載異步數(shù)據(jù)時(shí)可以提供更好的用戶體驗(yàn),下面小編就來和大家詳細(xì)講講Suspense如何優(yōu)雅處理異步數(shù)據(jù)加載吧2023-10-10
vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法
本篇文章主要介紹了vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07
vue使用elementUI組件實(shí)現(xiàn)分頁效果
分頁在展示數(shù)據(jù)列表的場(chǎng)景肯定是非常多的,一般的項(xiàng)目開發(fā)中,數(shù)據(jù)量特別大,一般都是后端接口直接處理分頁返回,前端直接調(diào)用即可,本文給大家介紹了vue使用elementUI組件實(shí)現(xiàn)分頁效果,需要的朋友可以參考下2023-12-12

