vue+electron 自动更新的实现代码
作者:摆烂程序鱼
这篇文章主要介绍了vue+electron 自动更新的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
1. 配置 package.json或vue.config.js文件中的应用更新服务器地址
module.exports = { pluginOptions: { electronBuilder: { ... publish: [ { provider: 'generic', url: 'http://qc***/***' // 服务器地址 } ] ... } } } }
2. 在主进程写更新应用逻辑
在 checkupdate.js
文件或 main.js
中写入
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') //跳过打包检查 开发环境使用 打包的时候注释掉 // Object.defineProperty(app, 'isPackaged', { // get() { // return true; // } // }); /** * -1 检查更新失败 0 正在检查更新 1 检测到新版本,准备下载 2 未检测到新版本 3 下载中 4 下载完成 **/ class Update { mainWindow constructor() { autoUpdater.setFeedURL(build.publish[0].url) // 当更新发生错误的时候触发。 autoUpdater.on('error', (err) => { if (err.message.includes('sha512 checksum mismatch')) { this.Message(this.mainWindow, -1, 'sha512校验失败') } else { this.Message(this.mainWindow, -1, '错误信息请看主进程控制台') } }) // 当开始检查更新的时候触发 autoUpdater.on('checking-for-update', (event, arg) => { this.timer(this.mainWindow, 0, "正在检查更新...", 5000) }) // 发现可更新数据时 autoUpdater.on('update-available', (event, arg) => { this.timer(this.mainWindow, 1, "发现新版本", 10000) this.timer(this.mainWindow, 1, "检测到新版本,正在下载安装包...", 15000) }) // 没有可更新数据时 autoUpdater.on('update-not-available', (event, arg) => { this.timer(this.mainWindow, 2, "暂未检测到新版本,当前版本为最新版本,无需更新", 15000) }) // 下载监听 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)); //下载进度 let bytesPerSecond = this.renderSize(progressObj.bytesPerSecond); //下载速度 // let message = `总大小:${total} 下载进度:${percent}% 下载速度${bytesPerSecond}/S` let message = `总大小:${total} 下载进度:${percent}%` // this.Message(this.mainWindow, 3, message) }) // 下载完成 autoUpdater.on('update-downloaded', () => { // console.log('done') this.Message(this.mainWindow, 4, "新版本已下载完成,五秒后自动安装并重启...") setTimeout(() => { this.quitInstall(); }, 5000) }) } // 负责向渲染进程发送信息 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); }); } // 执行自动更新检查 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";//调试使用 正式上线后注释掉 autoUpdater.checkForUpdates().catch(err => { console.log('网络连接问题', 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);//保留的小数位数 return size + unitArr[index]; } // 定时器 timer(mainWindow, number, message, time) { setTimeout(() => { this.Message(mainWindow, number, message) }, time) } } export default Update
3. 打包升级版的应用(v1.1.0)
注意:
每次打包记得去package.json文件中修改version版本号,这样系统才会检测到最新版本
打包后 dis有如下两个文件:
新版本安装包.exe
latest.yml
将上面两个文件复制到 ‘更新服务器’ (http://qc***/***) 目录下;
以后每次有更新就复制这两个文件至 ‘更新服务器’,旧版本的应用的执行文件(.exe)可以删除。
到此这篇关于vue+electron 自动更新的文章就介绍到这了,更多相关vue electron 自动更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!