配合工具，快速学习与体验electron增量更新

有任何问题，都可以私信博主，共同探讨学习。

前言

前段时间已经把electron增量更新相关知识点介绍完毕，但还是有很多小伙伴私聊我，需要源码和更细致的讲解。

这部分的文章可能确实比较匮乏，所以我在以前的开源项目里增加了这部分的源码。希望对大家有所帮助。文章中的链接过多，很容易被平台送进小黑屋，所以源码地址放在评论区，各位有需要的自行下载即可。

本篇文章主要介绍如何使用源码和博主开发的工具，体验和便捷开发自己的增量更新功能。

一、如何使用源码

1.1 下载代码

首先大家需要通过git下载代码，在想要存放项目的文件夹，打开cmd命令行窗口，输入：

git clone https://gitee.com/zjsj_lize/electron-vue-basic.git

如图：

回车，即可在该目录下载代码资源。

1.2 下载资源

通过自己喜欢的编译器IDE打开项目，我的是webstorm，然后在终端窗口输入

npm install
或者
cnpm install
或者
yarn install
……

选一个你喜欢的工具（npm、cnpm、yarn等），下载代码所需资源。如果electron相关代码下载失败，记得使用国内镜像资源。

1.3 运行项目

资源下载完毕后，在终端输入命令：

yarn dev
或者
npm run dev

运行项目，如图：

切换登录方式，即可无需密码进入软件。

如果需要博主的其他资源，可以通过中二少年学编程的个人主页来获取你需要的资源。

二、如何使用工具

2.1 打包新版本更新包

首先我们要了解，当服务器上的软件版本大于本地软件版本，才会触发更新操作。

所以，我们先打包一个1.0.1版本的软件。在package.json文件中，修改版本信息为1.0.1：

在终端执行：

yarn build
或者
npm rund build

得到打包后的文件如图：

其中，和更新有关的是三个文件：

• electron-vue-basic Setup 1.0.1.exe
• electron-vue-basic Setup 1.0.1.exe.blockmap
• latest.yml

将这三个文件放到服务器上，如果本地的三个对应文件版本低于服务器，那么就会触发更新操作。

2.2 创建nginx文件服务器

通过博主开发的工具——中二少年工具箱，快速搭建一个nginx服务器。获取地址：中二少年学编程的个人主页

启动后，默认端口83就是一个文件服务器，介绍一下各个参数：

• alias：文件部署的相对路径
• autoindex：打开文件浏览功能，nginx默认是关闭文件目录浏览功能
• sendfile：是否启用sendfile系统，提高文件传输性能。新版的nginx都是默认开启，为了兼容旧版本，我们显式地配置为on
• charset：编码格式，不设置可能会导致文件名乱码
• limit_rate：传输速率。如果本地测试更新功能，不设置速率，文件传输速度会过快，看不到软件更新的过程，限制速率，开发环境，可以更好地测试，正式环境，可以控制流量。

上面是文件服务器常用的几个参数，中二少年工具箱里已经为大家提供可视化操作，如果需要更多个性化配置，可以自行打开nginx配置文件修改参数。

如果需要在可视化页面修改配置，需要点击提交后，再点击启动或者重启，才可生效。

2.3 在文件服务器保存软件更新包

nginx启动后，点击右上角的快捷操作：

点击打开部署文件夹：

会直接打开nginx文件服务部署的文件夹：

再点击打开站点：

会自动打开浏览器，并访问我们部署的文件服务器：

出现我们复制的三个文件，说明文件成功部署到nginx服务器中。

三、如何测试更新

3.1本地运行低版本

重新修改项目的package.json，将版本号修改为1.0.0（低于nginx服务器中的1.0.1）：

然后在本地运行项目，软件首页会默认弹出更新框：

点击立即更新，在终端输出信息：

可以看出，我们写的更新代码生效了，发现了服务器有新版本1.0.1，但是更新的时候提示缺少dev-app-update.yml文件。

3.2 本地测试更新功能

dev-app-update.yml文件的相关信息在electron-updater官网（其实就是electron-builder的auto update部分，electron-updater应该是基于auto-update，源码很多都是一样的）：

Note that in order to develop/test UI/UX of updating without packaging the application you need to have a file named in the root of your project, which matches your setting from electron-builder config (but in yaml format). But it is not recommended, better to test auto-update for installed application (especially on Windows). Minio is recommended as a local server for testing updates.

上面是原文，大致意思就是如果想要在开发环境测试更新功能，就需要在项目根目录创建一个yaml类型的文件，该文件和electron-builder中的配置相匹配。后面说不建议xxx那巴拉巴拉一大堆可以不用管。

我想说的是，官方就算不建议开发环境下测试更新功能，你能不能给个配置模版，让我自行选择接不接受建议……官方没模版，网上的文章也是五花八门各种黑科技去绕过这个机制~~

其实解决方式很简单，只需要在项目根目录，创建dev-app-update.yml文件：

然后在其中配置：

provider: generic
updaterCacheDirName: dev-updater
url: "http://127.0.0.1:83/updater/lize-tools-pc"

url可以随便写，因为我们更新的逻辑里，会通过代码去维护服务器地址。但是不能不写，否则可能会有问题。

把上面都做完后，再点击更新按钮：

发现正常更新。如果是第一次更新，即使设置了增量更新，也会走一次全量更新，因为本地没有源文件，从1.0.0至1.0.1只能走一次全量。后面再从1.0.1至1.0.2，就会走增量更新。

至此，我们配合着中二少年工具箱，把electron-bue-basic项目源码的增量更新功能完全演示了一遍。后续有个性化开发需求，也可以借助中二少年工具箱的nginx管理功能，方便快捷地搭建文件服务器。

如果仍然有不明白的小伙伴，请私聊我吧。

总结

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