2023年11月29日发(作者：)
如何使⽤electron-builder及electron-updater给项⽬配置⾃动更新
说明：
本⽂的⾃动更新功能使⽤的项⽬为 electron-vue 脚⼿架搭建⼀个默认项⽬。
参考的⽂章如下：
electron-vue 中⽂⽂档
electron-builder ⽂档
Windows 下⽀持⾃动更新的 Electron 应⽤脚⼿架
Electron ⽂档 Docs / API / autoUpdater
开始：新建⼀个 electron 项⽬
⾸先你得有⼀个需要配置⾃动更新功能的 electron 项⽬。这⾥我为了测试⾃动更新功能是否成功搭建使⽤的是 electron-vue 脚⼿架搭建的项
⽬。
搭建过程如下：
# 安装 vue-cli 和 脚⼿架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue autoUpdataTest
# 安装依赖并运⾏你的程序
cd autoUpdataTest
npm install
npm run dev
程序运⾏后的界⾯如下：
脚⼿架⽣成的⽂件结构：
|- autoUpdateTest
|- .electron-vue # 压缩及运⾏环境的配置⽂件
|- build #
|- icons # 图标⽂件
|- ... # 打包⽣成的⽂件在此处
|- dist # ⽤ webpack 压缩项⽬后⽣成的压缩⽂件在此处
|- node_modules
|- src # 资源⽂件
|- main # 主进程
|- renderer # 渲染进程
|- # ⼊⼝⽂件
|- static # 静态资源
|- .babelrc
|- .gitignore
|- .travis
|-
|- # npm ⾃动⽣成的⽂件
|-
|-
使⽤ electron-builder 最关键的配置在 ⾥：（为了观察我们所需要的地⽅，把此篇⽂章⾥不需要关注的代码给删掉了。）
{
"name": "autoupdatetest",
"version": "0.0.0",
"author": "wonder
"description": "An electron-vue project",
"main": "./dist/electron/",
"scripts": {
"build": "node .electron-vue/ && electron-builder",
"dev": "node .electron-vue/",
},
"build": {
"productName": "autoupdateteset",
"appId": "on-vue",
"directories": {
"output": "build"
},
"files": "dist/electron/**/*",
"win": {
"icon": "build/icons/"
}
},
"dependencies": {
},
"devDependencies": {
}
}
解析：
前四⾏是⼀般的 会有的：
name
— 项⽬名
version
— 版本号
author
— 开发⼈员及邮箱号
description
— 项⽬描述 。
下⾯重点看后⾯的内容：
"main": "./dist/electron/" — 这⾥的 main ⼊⼝⽂件指的是⽤ electron-builder 打包主程序的⼊⼝⽂件，这⾥的路径是使⽤ webpack
压缩项⽬后⽂件输出的位置。
scripts — 脚本
"build": "node .electron-vue/ && electron-builder" — ⽣产环境，压缩打包项⽬。先运⾏ .electron-vue ⽂件夹下的 脚
本对项⽬进⾏压缩，输出的位置在 dist ⽂件夹下，然后再使⽤配置好的 electron-builder 对 dist ⽂件夹下的⽂件进⾏打包⽣成应⽤的
安装包。
"dev": "node .electron-vue/" — 开发环境，可以运⾏我们的项⽬并测试。这⾥使⽤了热更新，改动代码不需要刷新即可
看到应⽤的改变。
build — electron-builder 配置项
"productName": "autoupdateteset", — ⼯程项⽬名
"appId": "on-vue" — 应⽤程序 ID。强烈建议设置显式ID。
directories
"output": "build" — ⽣成的安装包输出⽬录。
"files": "dist/electron/**/*" — 安装包源⽂件⽬录，⽀持多路径（数组）
"win": { "icon": "build/icons/"} — 打包成 Windows 系统下安装包应⽤程序图标路径，还有别的配置项可以在详细⽂档中查
看。
有关 electron-vue 的使⽤的更详细的说明请看 。
⾃动更新
安装依赖
⾃动更新功能的实现依赖 和 。
electron-builderelectron-updater
因为我们是⽤的electron-builder脚⼿架⽣成的项⽬，已经有 依赖了，所以只需要安装 。
electron-builderelectron-updater
# ⽬录 E:GitHubautoupdateteset
npm i electron-updater --save # 必须安装为运⾏依赖，否则运⾏会出错
配置
为了配合打包 需要给 build 新增配置项：
"build": {
"publish": [
{
"provider": "generic",
"url": "127.0.0.1:5500/" #这⾥是我本地开的服务器的地址
}
],
...
}
主进程(参考：)
主进程的⼊⼝⽂件是 。
src/main/
import {
app, // app 模块是为了控制整个应⽤的⽣命周期设计的。
BrowserWindow, // BrowserWindow 类让你有创建⼀个浏览器窗⼝的权⼒。
});
// 更新下载完成事件
('update-downloaded', function(event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
sendUpdateMessage('isUpdateNow');
('updateNow', (e, arg) => {
dInstall();
});
});
//执⾏⾃动更新检查
orUpdates();
};
// 主进程主动发送消息给渲染进程函数
function sendUpdateMessage(message, data) {
({ message, data });
('message', { message, data });
}
⾃动更新过程简单介绍
1.将 ⾥的版本号先改为 0.0.1，然后⽣成⼀个版本为0.0.1的安装包。
npm run build
注意上⾯⼀步会⽣成⼀个⽂件，autoUpdate 实际上通过检查该⽂件中安装包版本号与当前应⽤版本号对⽐来进⾏更新判断的。
⽂件内容如下：
2.然后将上⼀步⽣成的安装包放在本地开启的服务器⽂件夹下，对应你在主程序⼊⼝⽂件中配置的服务器位置。
3.将 中的版本号改回0.0.0，再⼀遍，运⾏ build ⽂件夹下的 exe 安装包，就将软件安装在你电脑⾥⾯了。点击安装完
npm run build
成后桌⾯上的快捷⽅式，再次点击上⾯的获取更新的按钮就可以看到显⽰在界⾯的⾃动更新⽣命周期了。（但这⾥因为会给你直接⾃动更新，所
以会⼀闪⽽过，你可以在 autoUpdate 的各个⽣命周期事件⾥设置主进程与渲染进程通信，则可以⼀步⼀步观察到整个⾃动更新的⽣命周期了。
）
通过测试总结 autoUpdate ⽣命周期图
更新过程展⽰
1、⽆版本更新
2、有版本更新
点击取消后会先不更新，在应⽤关闭后更新：
点击确认后则会直接更新：
踩过的坑
1、主进程与渲染进程通信
最开始我是直接在主进程直接运⾏更新
然后想在渲染进程中打印主进程传过来的消息，但是发现只有 isUpdateNow 事件运⾏时才有⽇志显⽰。
结果发现原来主进程与渲染进程之间通信必须在渲染进程已经运⾏的时候（即那个界⾯完全显⽰出来）才能够进⾏。所以我将⾃动更新改为界⾯
按钮触发，这样才能检测到⾃动更新的整个流程。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
发布评论