electron-vue+electron-updater實現(xiàn)自動更新(步驟源碼)
1、編寫語言:electron、vue
2、更新庫:"electron-updater": "4.3.5"
下面直接上步驟源碼
1、autoUpdater.js (操控更新js文件)
import { autoUpdater } from 'electron-updater'
import { app, ipcMain } from 'electron'
// 服務器靜態(tài)文件地址,文章后面附上ng配置及需要上傳的文件
const updateUrl = 'http://***/updateExe/'
// 檢測更新,在你想要檢查更新的時候執(zhí)行,renderer事件觸發(fā)后的操作自行編寫
function updateHandle (updateConfig) {
let message = {
error: '檢查更新出錯',
checking: '正在檢查更新……',
updateAva: '檢測到新版本,正在下載……',
updateNotAva: '現(xiàn)在使用的就是最新版本,不用更新'
}
// 設置是否自動下載,默認是true,當點擊檢測到新版本時,會自動下載安裝包,所以設置為false
autoUpdater.autoDownload = false
// 設置服務器更新地址
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)
})
// 版本檢測結(jié)束,準備更新
autoUpdater.on('update-available', function (info) {
sendUpdateMessage('update-available',message.updateAva)
})
autoUpdater.on('update-not-available', function (info) {
sendUpdateMessage('update-not-available',message.updateNotAva)
})
// 更新下載進度事件
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進程發(fā)送事件給renderer進程,提示更新信息
function sendUpdateMessage (name,text) {
// 窗口對象自行修改
let loginWindow = global.browserList.logins[0]
loginWindow.webContents.send('UpdateMessage', {name,text})
}
}
// 觸發(fā)更新檢測
ipcMain.on('checkForUpdates', () => {
autoUpdater.checkForUpdates()
})
// 開始下載,通過渲染進程發(fā)起
ipcMain.on('downloadUpdate', () => {
autoUpdater.downloadUpdate()
})
// 下載完成,退出且重新安裝
ipcMain.on('updateSuccess', () => {
// 加載更新程序
autoUpdater.quitAndInstall()
// 關(guān)閉當前electron
app.quit()
})
export default updateHandle2、main.js(也就是package.json內(nèi)的main指向的js文件)
import updateHandle from '@/mainFolder/util/autoUpdater.js' //自動更新 // ... 省略其次代碼,為了更新代碼更明了 //自動更新 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í)行之前,可以是登錄接口查詢到版本不對之后再觸發(fā)檢測更新
// ...登錄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('收到更新版本號', res, this.navJson)
// 自動更新過程
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'){ // 下載進度
this.percent = Math.ceil(data.text)
}else if(data.name == 'update-downloaded'){
this.$Message.success('下載完成,準備重啟')
setTimeout(() => {
this.$ipcRenderer.send('updateSuccess')
},2000)
}
},
//開始升級
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:服務器文件地址
electronBuilder: {
builderOptions: {
productName: 'soft', // 打包文件名稱,盡可能用英文
// ...
publish: [
{
"provider": "generic",
"url": `http://***/updateExe/`
}
],
}
}5、服務器ng配置
// nginx配置靜態(tài)文件目錄
http {
server {
# 增加這一個配置
location /updateExe/ {
alias /usr/item/updateExe/;
}
}
}6、將打包后的exe + latest.yml 傳入/usr/item/updateExe/這個目錄下
備注:
1、5步驟配置ng靜態(tài)文件訪問鏈接,有文件服務器的可跳過
2、文章中的 http://***/updateExe/ 的 ***記得替換成服務器公網(wǎng)ip
效果如下:

到此這篇關(guān)于electron-vue+electron-updater實現(xiàn)自動更新的文章就介紹到這了,更多相關(guān)electron-vue自動更新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3?Suspense實現(xiàn)優(yōu)雅處理異步數(shù)據(jù)加載
Suspense?是?Vue?3?中用于處理異步數(shù)據(jù)加載的特性,它使得在加載異步數(shù)據(jù)時可以提供更好的用戶體驗,下面小編就來和大家詳細講講Suspense如何優(yōu)雅處理異步數(shù)據(jù)加載吧2023-10-10
vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法
本篇文章主要介紹了vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法,具有一定的參考價值,有興趣的可以了解一下2017-07-07

