electron-updater实现electron全量更新和增量更新——注意事项/技巧汇总

同学们可以私信我加入学习群！

---

---

前言

最近好久不更文，一是公司的事确实很忙，二是把时间都用在开发工具上了，写文总是提不起兴趣。

好消息是工具总算是憋出来几个，坏消息功能怎么实现的，代码快忘差不多了。我经常看着我写过的代码一脸茫然：这真的是我写的？？？

软件目前功能汇总：svga预览、node版本管理、前端部署-nginx管理、webstorm破解、浏览器插件等。

围绕这些功能，可能会重新开一个文章系列——pc工具源码系列，详细讲解它们都是怎么实现的。但是对它们的讲解放在这里不太合适，因为本系列主要讲解的是electron的基础技能，demo只是辅助。大家可以先关注下博主的小程序/公众号/csdn/掘金/知乎，依靠个人喜好。

上一篇文章讲解过更新模块的主进程实现，本文讲一讲在调试更新模块代码时，一些小技巧。

更新功能所有文章汇总

1. electron-updater实现electron全量更新和增量更新——主进程部分
2. electron-updater实现electron全量更新和增量更新——注意事项/技巧汇总
3. electron-updater实现electron全量更新和增量更新——渲染进程UI部分
4. electron-updater实现electron全量更新和增量更新——渲染进程交互部分

一、信任软件更新

更新时会修改dll文件，如果遇到杀毒软件拦截，请选择相信软件。如果选择阻止本次操作，可能会导致一些不可预期的错误。（其实目前软件很简单，阻止后大概率也是没什么问题的）

二、electron-updater下载的更新包地址

在运行代码的时候，我们就可以在终端看到更新地址的相关信息：

我的项目中，开发环境下electron更新包目录是C:\Users\Administrator\AppData\Local\dev-updaterelectron-updater。正式环境下载的更新包本地目录：C:\Users\Administrator\AppData\Local\lize-tools-updater\pending。可以看出，更新包目录都是在在C:\Users\Administrator\AppData\Local文件夹下，只不过对应的文件目录名有所改变，package.json中设置的name属性为“xxx”,则对应的目录名就是"xxx-updater"

每个人的目录应该大同小异，了解这个目录地址对更新功能开发十分有用，因为当我们反复调试某些功能时，需要经常将本地的更新包信息都删除，否则软件检测到已经下载过安装包，就会自动进入安装界面，不会弹出更新页面。

三、本地调试electron-updater时，限制nginx的下载速度

在本地调试插件时，限制nginx的下载速度十分有必要，因为如果不加以限制，本地的nginx下载速度理论上就是硬盘的读取速度，这个速度过于快，会导致我们无法调试部分下载功能。

在本地nginx中限制下载速度limit_rate ：

server {
		listen 8888;  # 监听8888端口
        server_name localhost;  # 服务器名称，可以是IP地址或域名

        location /updater {
            add_header Access-Control-Allow-Origin *;
			add_header Access-Control-Allow-Credentials true;
			add_header Access-Control-Allow-Methods GET,POST;
			alias html/file;
			limit_rate 1000k;
			sendfile on;
			autoindex on;
        }
	
	}

正是环境下的更新包，仍然是在C:\Users\Administrator\AppData\Local目录下，只不过文件根目录名有所改变，package.json中设置的name属性为“xxx”,则对应的跟目录就是"xxx-updater"，全路径即：C:\Users\Administrator\AppData\Local\xxx-updater。
在反复测试正式环境下的更新功能时，会经常操作这个文件夹，删除里面的应用，否则软件检测到已经下载过安装包，就会自动进入安装界面，不会弹出更新页面。

四、增量更新需要复制三个文件

要实现增量更新，需要复制这三个文件到文件服务器：

我的项目是使用nginx创建了文件服务器，以我的配置为例，我把file文件存放的位置和前端项目同级：

然后把更新文件都放在这个file里：

最终在nginx配置，把这个file文件夹搭建成一个文件服务器，如果在浏览器输入对应的url地址后，出现以下页面，便表示部署成功：

在调试更新功能的期间，会经常操作nginx服务器，不论各位是新手还是老手，都容易忘记自己的配置，能够便捷地查看配置、操控nginx服务器的启动、更新，这很影响我们的开发效率。所以我在自己的中二少年工具箱中首先开发了nginx管理功能。有需要的可以自取，操作界面如图：

五、第一次更新都会走全量更新

不论是通过绿色压缩包还是通过exe安装软件，因为本地的C:\Users\Administrator\AppData\Local目录下还没有更新信息，所以在第一次更新时，都会全量下载，时间可能略长，这并不是增量更新失败的标志。当本地存在任意版本的更新信息，例如：

下次更新会走增量更新，下载速度会很快。

六、报错缺少elevate.exe时的解决方案

开发环境下，调试更新功能时，可能报错：

Cannot run installer: error code: EACCES, error message: "spawn C:\Users\Administrator\AppData\Local\dev-updater\pending\中二少年工具箱 Setup 1.0.5.exe EACCES", will be executed again using elevate if EACCES, and will try to use
 electron.shell.openItem if ENOENT
Executing: F:\myProject\lize-tools\lize-tools-pc\node_modules\electron\dist\resources\elevate.exe with args: C:\Users\Administrator\AppData\Local\dev-updater\pending\中二少年工具箱 Setup 1.0.5.exe,--updated,--force-run
Error: Error: spawn F:\myProject\lize-tools\lize-tools-pc\node_modules\electron\dist\resources\elevate.exe ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:286:19)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Update installer has already been triggered. Quitting application. 

其实我在网上没有查到这个报错相关信息，好像大家都没报这个错？

根据报错信息可知，是缺少文件spawn F:\myProject\lize-tools\lize-tools-pc\node_modules\electron\dist\resources\elevate.exe，我们把elevate.exe文件放到对应的目录下即可。elevate.exe文件，在运行一次build打包后，会出现在编译后的项目中，各位如果也报了这个错，可以找一找，然后放到开发环境下。

---

总结

大家如果需要联系博主，或者获取博主各系列文章对应的资源，可以通过中二少年学编程的个人主页来获取。

有任何前端项目、demo、教程需求，都可以联系博主，博主会视精力更新，免费的羊毛，不薅白不薅！~