二次封装electron-vite，新增更新推送、最小化等功能

最新推荐文章于 2025-03-24 10:54:10 发布
最新推荐文章于 2025-03-24 10:54:10 发布
阅读量455 收藏 1
点赞数 4
文章标签： electron javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zzz18789/article/details/142764900
版权

源码地址：electron-vue-template
最近要做一个客户端项目，根据技术选型选择了electron，然后找到了一个封装好的框架electron-vite，不过发现还有很多功能没有进行封装，于是就阅读electron文档和搜索，新增了如下功能：
打开时检测是否有新版本
用户手动点击检测更新并反馈
调用操作系统进行通知及点击通知通信
点击关闭时提示是否最小化到托盘，及托盘功能选项
axios请求封装

效果图：

新版本提示

新版本提示

手动检测更新且无新版本

在这里插入图片描述
相关代码地址：src\main\update.ts

系统通知及点击通知页面通信

在这里插入图片描述
在这里插入图片描述
相关代码地址：src\renderer\src\App.vue

最小化提示及托盘操作

在这里插入图片描述
在这里插入图片描述
相关代码地址：src\main\tray.ts

electron-vue项目 自动更新解决方案（附代码）
HRM2454的博客
08-27 2789
electron-vue的创建过程这里不再赘述。相信已经搜索到这篇文章的你，已经完成了这个过程，下面我们进入正题 前言 如果您的electron版本还是2.xx版本，需要更新electron版本，更新方式戳这里https://blog.csdn.net/weixin_43272648/article/details/104339699 第一步，安装electron-updater依赖 npminstallelectron-updater--save 第二步，配置packa...
electron-vite_10electron-updater软件更新
u014708123的博客
10-15 1011
网很多electron-updater更新文章，这里只简单写一下演示代码；
搭建electron+vite框架的三种方法
最新发布
weixin_47017648的博客
03-24 506
*vite-plugin-electron** 是一个插件，使得在 Vite 项目中开发 Electron 应用变得像普通的 Vite 项目一样简单。**electron-vite** 是一个新型构建工具，旨在为 [Electron](https://www.electronjs.org/) 提供更快、更精简的开发体验。总结:用electron-vite构建electron相对比较简单,生成的目录结构清晰,配置方便,但是要求node版本较高。条件:node.js版本 14.18.0+以上。
electron版本更新之增量更新、无感更新
sxww_zyt的博客
06-02 7520
上一篇介绍了但是全量更新的包太大了，而且也不是每次都改动很多东西需要全量更的，有没有什么办法可以少量更新呢？本篇就在上一篇的基础上，讲述一下如何进行增量更新。
超详细！！！electron-vite-vue开发桌面应用之应用更新版本提示（十三）
qq_43206280的博客
09-06 1129
当项目应用包更新后应该主动提示用户更新，这是采用electron-updater进行更新提示。
Electron-vue开发实战 - 自动更新
Moking的博客
01-08 558
electron-builder构建的应用自动更新可以使用electron-updater很快的实现版本的自动更新. 使用 安装 npm i electron-updater 在package.json中加入publish和版本更新信息 { "version": "0.5.18", ... "build": { "releaseInfo": { "releaseNotes": "1.添加了 xxxx\n2.更新了xxxx\n3.修复了 xxxx
electron-vite-quick-start:全栈使用 Vite 运行 Electron 应用程序，包括主进程
07-24
Electron-vite-快速启动 :high_voltage: 全栈使用 Vite来运行 Electron 应用程序，包括主进程。 :light_bulb: 项目使用管理，因此推荐使用Yarn作为包管理工具。 快速使用 # Clone this repository $ git clone ...
electron-vite-tailwind-starter:这个 Starter 结合使用 Electron、Vite 和 Tailwindcss。 它试图坚持最佳实践
07-23
Electron 12 + Vite 2 + Tailwind 2 - 启动器 这个 Starter 结合使用 、 和 。 它试图遵循在提到的最佳实践 它也使用 。 安装 yarn 发展 yarn dev 建造 yarn build
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
05-02
electron-vue-vite Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了...
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
本项目利用`electron-vue`、`electron-builder`和`electron-updater`这三款强大的工具，实现了一个完整的远程更新流程，包括检查更新、下载更新以及自动安装更新。以下将详细介绍这三个组件的功能和实现方式。 **1....
electron-vue-vite-webpack:Electron、vue3、vite2、webpack5、ant-design-vue2 整合
05-17
电子vue-vite-webpack Electron + vue3 + vite2 + webpack5 + ant-design-vue2 如何和为什么 Vite是未来的脚手架 在开发期间使用“拜访”以保持快速启动的优势 使用“ webpack”解决包装期间的包装问题 命令 npm ...
Electron-vue 系列之自动更新与手动更新
mm_0123456789的博客
01-30 5178
Electron-vue 系列之自动更新与手动更新 文章目录Electron-vue 系列之自动更新与手动更新一、主要插件1. electron-builder2. electron-updater二、各项配置1. package.json中publish配置2. 升级包配置3. 本地http服务器启动三、关键代码编写1. autoUpdate.js 文件2、前端页面 update.vue3. 在主进程中引入自动升级4. 实现效果五、注意事项六、额外配置项详解1. 控制流程的 api2. 一些配置项 一、
electron 热更新
m0_62018151的博客
06-15 8424
electron 热更新
Electron：软件更新
xulin_1027的专栏
06-30 2820
二、update.js，需要配置updateUrl，既软件安装包所在服务器的目录，如http://域名/app/，其中app目录下存放的latest.yml、安装包.exe（mac端是latest-mac.yml、安装包.dmg、安装包.zip）七、需要自己实现（比如页面启动调用服务端接口获取最新版本，比对当前版本和服务器最新版本，然后弹出SoftUpdate.vue）1、客户端启动，调用服务器接口，获取是否有更新配置（服务端返回发布的最新版本号和更新内容）。注：本人初学记录，用法并非最优，仅供参考。
electron+vite+vue+ts项目搭建(三)-打包exe上传github，electron-updater自动检测更新
wz121341的博客
08-16 415
打包上传github，electron-updater自动检测更新
【electron-vite】搭建electron+vue3框架基础
我有满天星辰的博客
11-30 4133
electron项目搭建
使用electron-update实现electron应用的自动更新
qq_45279180的博客
06-30 5259
因为我也是从零开始接触electron，所以许多不足之处可以提出来多多交流，如有补充万分感谢。 一、项目环境 我这边的框架使用的是electron和vue,因为vue的脚手架插件时有electron编译的，所以不需要自己去写build，非常方便，随便说一句希望以后这种官方合作越来越多。 我这里使用的electron版本是13.0.1，vue的版本还是2.6.11，electron-update的版本是4.3.9 $ npm i electron $ npm i electron-updater 二、设置
Electron-Vite 项目搭建（Vue）
Mr. Zhang Xiaojian's Blog
12-12 1077
electron-vite如果一切设置正确，能够看到Electron 应用程序。完成上述步骤后，脚手架将会自动搭建好项目结构。的文件夹，并在其中创建一个。桌面应用
Electron应用程序的增量更新
AxCybersecurity的博客
09-17 719
然而，使用 Electron 框架，开发者可以实现应用程序的增量更新，使得应用程序的更新变得更加高效和无缝。总结起来，通过使用 Electron 的 autoUpdater 模块和一个服务器来存储和提供应用程序的更新文件，开发者可以实现应用程序的增量更新。当用户运行应用程序时，它将自动从服务器检查可用的增量更新，并根据需要下载和安装更新。在服务器上，我们将维护一个版本控制文件，它记录了每个应用程序版本的元数据和更新文件的信息。相比于传统的全量更新，增量更新可以显著减少下载和安装的时间和资源消耗。
electron-vite-vue热更新
05-18
Electron是一个使用HTML，CSS和JavaScript构建跨平台桌面应用程序的开源框架，而Vite是一个快速的Web应用程序构建工具。结合起来，我们可以使用Electron-Vite-Vue来快速构建跨平台的桌面应用程序。其中，热更新是指在开发过程中，每当我们修改代码时，应用程序会自动重新加载并展示更新后的内容，从而加快开发效率。 具体来说，使用Electron-Vite-Vue进行热更新的步骤如下： 1. 在package.json中添加dev脚本，用于启动开发模式。 2. 安装并配置vite-electron-builder插件，用于构建和打包应用程序。 3. 在主进程代码中添加代码来启动渲染进程的热更新服务。 4. 在渲染进程代码中添加代码来启动Vue的热更新服务。 通过以上步骤，我们就可以在开发过程中实现热更新，并且非常方便地调试和测试我们的应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

独断万古的伊莉雅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值