electron-updater使用整理

参考文章:

  1. 手撸 Electron 自动更新,再繁琐也要搞懂它 - 掘金 (juejin.cn)
  2. Electron 自动更新,绕过 latest.yml 使用自定义接口 - 掘金 (juejin.cn)
  3. electron-updater实现热更新完整流程 - 掘金 (juejin.cn)

一、 配置

1. 安装electron-updater
npm install electron-updater
2. 配置electron-builder

修改electron-builder.json,增加以下内容

"publish": [{"provider": "generic","url": "你的更新地址,可以是oss"}
]

二、具体操作

1. 代码部分

在主进程文件夹创建update.ts文件:

import { autoUpdater } from "electron-updater";
import { BrowserWindow, ipcMain, app } from 'electron'
import log from "electron-log" // 如果没有自己封装
import path from "path"let mainWindow: BrowserWindow
// 封装更新相关的进程通信方法
const sendUpdateMessage = (opt: { cmd: string, data: any }) => {mainWindow.webContents.send(opt.cmd, opt.data)
}
export const checkUpdate = (win: BrowserWindow) => {mainWindow = win // 关闭自动更新autoUpdater.autoDownload = false  // 开启开发环境调试,后边会有说明autoUpdater.forceDevUpdateConfig = true// 日志记录设置log.transports.file.level = "debug"autoUpdater.logger = log// 开发环境下的配置,详细参考后续说明// 方法3:以下整个if都不需要// if(!app.isPackaged){//   // 方法1: 项目根目录创建dev-update.yml//     autoUpdater.updateConfigPath = path.join(__dirname, "../dev-update.yml")//   // 方法2://     autoUpdater.setFeedURL('http://127.0.0.1:5173/release')// }// 监听升级失败事件autoUpdater.on("error", (error) => {sendUpdateMessage({cmd: 'update-error',data: error})})//监听发现可用更新事件autoUpdater.on('update-available', (message) => {sendUpdateMessage({cmd: 'update-available',data: message})})//监听没有可用更新事件autoUpdater.on('update-not-available', (message) => {sendUpdateMessage({cmd: 'update-not-available',data: message})});// 更新下载进度事件autoUpdater.on('download-progress', (progressObj) => {sendUpdateMessage({cmd: 'download-progress',data: progressObj})});//监听下载完成事件autoUpdater.on('update-downloaded',(releaseObj) => {sendUpdateMessage({cmd: 'update-downloaded',data: releaseObj})//退出并安装更新包autoUpdater.quitAndInstall()});//接收渲染进程消息,开始检查更新ipcMain.on("check-update", (event) => {//执行自动更新检查console.log("检查更新")autoUpdater.checkForUpdates()})// 触发更新ipcMain.on("update-app",(event) => {autoUpdater.downloadUpdate()})
}

main.ts中配置如下:

...
import { checkUpdate } from './update'
...const win = new BrowserWindow({...
})
try {checkUpdate(win)
} catch (error) {logger.error(error)
}

我这里h5部分采用的vue,对应的使用如下:

<script lang="ts" setup>
// 百分比进度
const progress = ref("")
const init = () => {// 这里对ipcRenderer进行了简单封装,参考ipc.tsipc.checkUpdate()ipc.on("update-available",(event:any, msg:any)=>{// 有更新})ipc.on("update-not-available",(event:any, msg:any)=>{// 没有更新})ipc.on("download-progress",(event:any, msg:any)=>{// 下载更新进度progress.value = `${Math.ceil(msg.percent)}%`})ipc.on("update-downloaded",(event:any, msg:any)=>{// 更新下载完成})ipc.on("update-error", (event:any, msg:any)=>{// 更新失败logger.log("update-error")logger.log(msg)})
}
const confrimUpdate = () => {ipc.updateApp()
}
</script>

封装的ipc.ts的部分内容:

/*** 监听主进程通信* @param title * @param callback */
on(title: string, callback: Function){ipcRenderer.on(title, callback)
}
// 软件更新相关
/*** 检查更新*/
checkUpdate = () => {ipcRenderer.send('check-update')
}
/*** 执行更新*/
updateApp = () => {ipcRenderer.send('update-app')
}
2. 打包

项目打包后会在指定的打包目录下(我这里是release文件夹)生成对应exe安装包和latest.yml文件,将这两个文件上传到最开始配置的url对应的路径内

三、关于开发环境下调试配置

一般情况下开发环境下直接调试会报错Skip checkForUpdates because application is not packed and dev update config is not forced,包括参考文章在内的绝大部分文章关于这块的解决方案是将app.isPackaged改为true

if (!app.isPackaged) { Object.defineProperty(app, 'isPackaged', { get: () => true, }); 
}

这样确实可以做到开发环境中调试,但是可能会影响到其他地方的功能配置,可以在update.ts中配置以下代码,并且不需要修改app.isPackaged

autoUpdater.forceDevUpdateConfig = true

以下为调试方法

方法1:

  1. 在根目录创建一个yml文件,名称自定义,这里我的是dev-update.yml,内容如下
provider: generic
updaterCacheDirName: dev-updater
url: "http://127.0.0.1:5173/release"

说明:

updaterCacheDirName 定义下载目录,全路径是C:\Users\用户名\AppData\Local\dev-updater,不配置则在C:\Users\用户名\AppData\Local下自动创建文件夹,开发环境下为项目名,生产环境下为项目名-updater

url 更新地址,指向latest.yml。不配置有时候会报错,最好配置上

  1. 上文update.ts 文件中对应位置填写如下
autoUpdater.updateConfigPath = path.join(__dirname, "../dev-update.yml")

然后就可以正常调试了。

方法2:

复制latest.yml到项目根目录,并改名为dev-app-update.yml,

update.ts中使用以下处理:

// 设置检查更新的地址为本地打包生成的latest.yml所在文件夹
autoUpdater.setFeedURL('http://127.0.0.1:5173/release')

方法3:

项目根目录创建dev-app-update.yml并填写以下内容,不需要使用autoUpdater.setFeedURL也不需要配置autoUpdater.updateConfigPath

provider: generic
updaterCacheDirName: dev-updater
url: "http://127.0.0.1:5173/release"

以上方法中也可以设置为http://127.0.0.1:5173,即项目根目录,此时需要将latest.yml和打包生成的exe文件复制到根目录,这里如果不复制exe文件会报404错误

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/643393.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【正点原子STM32】搭建开发环境(安装MDK和器件支持包、DAP仿真器和ST LINK仿真器、CH340串口驱动)

一、常用开发工具简介 MDKDAP 二、安装MDK 1、MDK简介2、如何获取MDK3、安装MDK和器件支持包 三、安装仿真器驱动 DAP仿真器免驱ST LINK仿真器驱动安装方法 ST LINK驱动及教程 四、安装CH340 USB虚拟串口驱动 1、安装CH340 USB虚拟串口驱动2、为什么要安装CH340 USB虚拟…

Google ASPIRE框架:赋予大型语言模型(LLMs)自我评估的新动力

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

大数据学习之Flink、比较不同框架的容错机制

第一章、Flink的容错机制 第二章、Flink核心组件和工作原理 第三章、Flink的恢复策略 第四章、Flink容错机制的注意事项 第五章、Flink的容错机制与其他框架的容错机制相比较 目录 第五章、Flink的容错机制与其他框架的容错机制相比较 Ⅰ、Flink的容错机制与其他框架的容…

springboot 整合 ElasticSearch 方法 (一)

下载 ES 相当于安装 MySQL, 可以在官网上下载 (链接在后面). 要注意安装的 ES 的版本要和项目中用的 Springboot 的版本对应. 比如我用的 Springboot 版本是 2.6, 所以ES要下载7.15 版本的. 官网链接: https://www.elastic.co/cn/downloads/elasticsearch 点右边这个查看更多…

腾讯云4核8G12M服务器我的世界mc够多少人?

mc我的世界服务器4核8g够多少人&#xff1f;80人&#xff0c;4核8G服务器最多支持80人同时在线。关于我的世界服务器的CPU和内存有用户测试过&#xff0c;阿腾云atengyun.com认为最多可以支持80人同时在线。如果运行的云服务器配置较低&#xff0c;启动游戏后可以在左下角看到配…

展厅设计更好的方法

一、与公司形象契合 在展厅规划时必定要留意公司的LOGO、主色调&#xff0c;以及企业文明。在展现时使用丰满的展厅规划传达出企业的理念。而在功用设置上&#xff0c;应当考虑内涵功用&#xff0c;从展厅作业人员的视点动身&#xff0c;为展厅作业人员提供杰出的环境&#xff…

【Java】---反射:Class、Filed、Constructor、Method

【Java】—反射 文章目录 【Java】---反射一、反射1.1 概念1.2 操作步骤 二、Class类2.1 概念2.2 方法2.2.1 getName()2.2.2 getSimpleName()2.2.3 getPackage()2.2.4 getSuperclass()2.2.5 getInterfaces() 三、Field类3.1 概念3.2 方法3.2.1 setAccessible(Boolean b)3.2.2 s…

关于图像分割项目的可视化脚本

1. 前言 之前实现了目标检测和图像分类任务的可视化脚本&#xff0c;本章将最后一个分割任务的可视化脚本实现 效果展示如下&#xff1a; 代码会在当前目录保存展示好的图片&#xff0c;从左到右依次为&#xff0c;原图、mask图、mask覆盖在原图的掩膜图 关于目标检测的可视化…

HTTP状态信息

1xx: 信息 消息:描述:100 Continue服务器仅接收到部分请求&#xff0c;但是一旦服务器并没有拒绝该请求&#xff0c;客户端应该继续发送其余的请求。101 Switching Protocols服务器转换协议&#xff1a;服务器将遵从客户的请求转换到另外一种协议。 2xx: 成功 消息:描述:200…

【二】从零到1设计一个丧葬行业小程序

1、准备工作 1-1、服务器准备 腾讯云轻量级服务器 4核2G 地址: http://1.14.34.13/ 购买域名 www.pengyangyan.work &#xff08;备案中&#xff09; 图片服务器&#xff1a;七牛云 1-2、环境配置 服务器 docker容器部署 https://blog.csdn.net/pengyangyan/article/d…

app如何实现悬浮框滚动到那个模块定位到那。

如图&#xff1a; 使用uniapp内置方法 onPageScroll 获取到滚动了多少。 其实拿到屏幕滚动多少就很简单了&#xff0c;下面是思路。 tap栏切换效果代码就不贴了。直接贴如何到那个模块定位到哪&#xff0c;和点击定位到当前模块。 <view v-if"show" class&qu…

Java中异常的优雅处理方式

工作当中经常遇到程序跑异常的问题&#xff0c;而优雅处理异常则是高质量代码的关键。本文将深入讨论Java中异常的优雅处理方式&#xff0c;通过代码示例和实际使用场景进行详细说明&#xff0c;帮助大家更好地理解和应用异常处理机制。 1. 异常处理基础 在Java中&#xff0c…

HarmonyOS鸿蒙应用开发( 四、重磅组件List列表组件使用详解)

List列表组件&#xff0c;是一个非常常用的组件。可以说在一个应用中&#xff0c;它的身影无处不在。它包含一系列相同宽度的列表项&#xff0c;适合连续、多行呈现同类数据&#xff0c;如商品列表、图片列表和和文本列表等。ArkUI 框架采用 List 容器组件创建列表&#xff08;…

某国有企业后备人才培养机制建设

某电力勘测设计院始建于1958年&#xff0c;是中国电力建设集团有限公司旗下的大型电力工程咨询公司。伴随着中国电力事业的发展&#xff0c;已发展为具备甲级电力工程规划、咨询、勘测、设计、总承包、环境及安全管理评价、地质灾害勘察、评估与治理、光电建筑一体化及发电专项…

大数据学习之Flink算子、了解DataStream API(基础篇一)

DataStream API &#xff08;基础篇&#xff09; 注&#xff1a; 本文只涉及DataStream 原因&#xff1a;随着大数据和流式计算需求的增长&#xff0c;处理实时数据流变得越来越重要。因此&#xff0c;DataStream由于其处理实时数据流的特性和能力&#xff0c;逐渐替代了DataSe…

Windows下安装达梦8开发版数据库

达梦数据库属于国产主流数据库之一&#xff0c;本文记录WIndows下安装最新的达梦8数据库的过程。   达梦官网&#xff08;参考文献1&#xff09;下载开发版&#xff08;X86平台&#xff09;版安装包&#xff0c;如下图所示&#xff1a; 解压安装包后&#xff0c;其中包含ISO文…

Unity中UGUI在Mask剪裁粒子特效的实现

在Unity使用Mask是剪裁不了粒子特效的&#xff0c;之前有想过RenderTexture来实现&#xff0c;不过使用RenderTexture不适合用于很多个特效&#xff0c;因为RenderTexture依赖Camera的照射&#xff0c;如果在背包中每种道具都有不同的特效&#xff0c;那使用RenderTexture则需要…

Vue3+Vite+Cesium项目开发心得(实时更新)

之前就想写的&#xff0c;纯属个人习惯总结&#xff0c;欢迎订正&#xff01; Cesium相关 1. Cesium包的引入&#xff0c;我还是建议直接放到public下面&#xff0c;html里直接加script标签的形式&#xff1b; 2. Vue的响应式不要挂接任何Cesium创建的任何对象&#xff0c;尤…

Armv8-M的TrustZone技术之SAU寄存器总结

每个SAU寄存器是32位宽。下表显示了SAU寄存器概要。 5.1 SAU_CTRL register SAU_CTRL寄存器的特征如下图和表所示&#xff1a; 5.2 SAU_TYPE register 5.3 SAU_RNR register 5.4 SAU_RBAR register 5.5 SAU_RLAR register 5.6 SAU区域配置 当SAU启用时&#xff0c;未由已启用…