vue+electron 自动更新

1. 配置 package.json或vue.config.js文件中的应用更新服务器地址
javascript 复制代码
module.exports = {
  pluginOptions: {
    electronBuilder: {
        ...
        
        publish: [
          {
            provider: 'generic',
            url: 'http://qc***/***'  // 服务器地址
          }
        ]

        ...

      }
    }
  }
}
2. 在主进程写更新应用逻辑

checkupdate.js 文件或 main.js 中写入

javascript 复制代码
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)可以删除。

相关推荐
咔咔库奇22 分钟前
【CSS问题】margin塌陷
前端·javascript·css
无敌最俊朗@1 小时前
c#————委托Action使用例子
java·前端·c#
见过夏天1 小时前
CSS 中渐变色的使用
前端·css
764331 小时前
JavaScript ES6 继承 class
前端·javascript
袁代码1 小时前
SwiftUI开发教程系列 - 第十二章:本地化与多语言支持
开发语言·前端·ios·swiftui·swift·ios开发
软件聚导航1 小时前
在uniapp中使用canvas封装组件遇到的坑,数据被后面设备覆盖,导致数据和前面的设备一样
java·前端·uni-app
谈谈叭2 小时前
Vue3中一级导航栏的吸顶导航交互以及Pinia优化重复请求
javascript·vue.js·es6·交互
好开心332 小时前
javaScript交互补充2(动画函数封装)
开发语言·前端·javascript·html·ecmascript
将登太行雪满山_2 小时前
自存 关于RestController请求传参数 前端和后端相关
java·前端·spring boot
kali-Myon2 小时前
ctfshow-web入门-SSTI(web369-web372)下
前端·python·学习·web安全·flask·web·ssti