HUA

Electron+Vue开发客户端时，一般安装包体积太大，如果使用常规的electron-updater来更新的话，每次升级都会重新下载整个安装包，一是浪费流量，最主要的是太耗时间。

因为我的客户端里不只是纯electron的资源，还有第三方的dll、exe等，所以使用网上使用比较多的差分【app.asar】的方式是行不通的，因为第三方的资源不会包含在app.asar中。

差分【app.asar】的更新方式可以参照以下我筛选的文章：

https://blog.csdn.net/sxww_zyt/article/details/131006833

http://hk.javashuo.com/article/p-skzcipva-vm.html

https://xuxin123.com/electron/increment-update1/

那么，如何将整个安装包差分后，提取成增量安装包呢？搜遍全网，没有完整的方案，所幸github上一位大佬开源的代码【electron-delta】给了我启发：

https://github.com/electron-delta/electron-sample-app

这是大佬提供的使用例，但只适用于oneClick方式打包（无法让用户自行指定安装路径），索性在此基础上，进行了改装，已实现：允许指定安装路径、强制/非强制更新设置，折腾历程甚是曲折，下面将一一进行讲解。

如上述提到的，由于electron-delta只提供了oneClick方式打包，如果想要指定安装路径方式安装，就需要对node_modules中的【@electron-delta】原代码进行修改，所以需要将以上工程【electron-sample-app】中的部分代码整合到自己工程中。

  1. 将【@electron-delta】添加到自己工程的src目录下，我已改名为【electron-delta】，相应使用的地方不要忘记同步改一下

  1. 【.electron-delta.js】添加到自己工程的src目录下

  1. 【vue.config.js】中的【builderOptions】中添加获取增量更新包的配置【afterAllArtifactBuild: ‘.electron-delta.js’】

此时，可通过自己工程的打包命令尝试打包，看合并代码后的工程是否存在问题。然后建议提交一版代码，为下一步大量修改代码做好准备。

  1. 修改【electron-delta】中的builder和updater模块代码，主要包括以下文件：

src/electron-delta/builder/src/create-all-deltas.js

src/electron-delta/builder/src/delta-installer-builder/index.js

src/electron-delta/builder/src/delta-installer-builder/nsis/installer.nsi

src/electron-delta/builder/src/index.js

src/electron-delta/updater/src/index.js

注：具体参照文末的代码例链接，由于此部分代码修改量比较大，可同原工程中的代码差分比较以明确修改范围

  1. 修改【src/background.js】代码

原autoUpdater逻辑改为使用deltaUpdater，如：

deltaUpdater.checkForUpdates();

deltaUpdater.downloadUpdate();

deltaUpdater.quitAndInstall();等，以及下图

  1. 修改【vue.config.js】配置

  1. 添加【scripts/checkEnv.nsh】，除了用于第三方exe是否退出的检查外，主要需要固定安装时注册表key：【com.yf-pc-chat-yfx.install-guid】，用于升级时读取原安装路径；
  2. 修改【package.json】配置

注：package.json及vue.config.js中固定卸载时注册表key：【guid: ‘
com.yf-pc-chat-yfx.uninstall-guid’】，用于更新控制面板中的显示版本和size信息

  1. 安装和卸载时为显示详情，npm安装的node_modules中的installSection.nsh原文件需要修改，并使用beforePack.js在打包前将修改后文件myInstallSection.nsh回写到node_modules【app-builder-lib\templates\nsis\】中，具体在vue.config.js中配置【beforePack: ’./scripts/beforePack.js’】。当然也可以直接手动修改node_modules中的代码，只是每次重新安装此模块都需要手改，太麻烦。
  2. 由于installer.nsi文件中包含中文，需要保存为utf-8 bom格式，但原语言文件为utf8格式，编辑会报错，另存文件【SimpChineseCustomized.nsh->SimpChinese.nsh、SimpChinese.nlf->SimpChineseCustomized.nlf】为utf-8 bom格式并引入installer.nsi，放入【C:\Users\Administrator\AppData\Roaming\electron-delta-bins\nsis-3.0.5.0\Contrib\Language files】中（此路径视本机安装使用的nsis而定），另存后的文件也存到了script文件夹中，以备后需，此处未使用beforePack.js进行引入；
  3. installer.nsi中需要使用【C:\Users\Administrator\AppData\Roaming\electron-delta-bins\nsis-3.0.5.0\Plugins\x86-ansi】中的【nsProcess.dll、ShellExecAsUser.dll】等plugin，如果不存在，用以下两种方式获取：
  4. 从【C:\Users\Administrator\AppData\Roaming\electron-delta-bins\nsis-3.0.5.0\Plugins\x86-unicode】（此路径视本机安装使用的nsis而定）中复制，或者从【https://nsis.sourceforge.io/NsProcess_plugin】中下载；
  5. 【release-notes.md】用来存放所有版本的更新记录，因为是更新安装前可进行查看，此文件放到了public中，在vue.config.js的releaseInfo中指定

此文件中的版本信息会在此事件的info.releaseNotes中存放：

deltaUpdater.on(‘update-available’, (info) => {…}，详情参照background.js和login.vue的交互逻辑

  1. 确认【.electron-delta.js】代码

  1. 执行工程的打包命令，生成exe安装文件，我的exe文件夹是dist_electron

上图标出的4个文件是全量更新时所必须的，其中full-win.json是为存放是否强制更新和最新版本信息新生成的，latest.yml原生工程中也会生成，但内容也做了补充，比如exe文件size和全量更新履历等，具体生成逻辑已包含在【electron-delta】代码中。

  1. 以上打包exe安装后，原exe文件需要保留在dist_electron中，因为后续使用其进行二进制差分生成增量更新包
  2. 假设代码已做修改，以下则为增量打包的配置过程
  3. pakage.json中的version(最新版本)、forceupdate(是否强制更新)、latestReleaseInfo(最新版更新履历)及public中的release-notes.md(注意书写格式)需要同步修改
  4. vue.config.js中的publish中，url需要修改为客户环境下载路径
  5. exe文件夹【dist_electron】中执行cmd打开命令窗口，执行【npx serve -p 5000】命令，用于生成增量包时使用

  1. 修改【.electron-delta.js】代码并保存

上图假设上一版本为1.0.8，最新版本为1.0.9，可兼顾停留在1.0.7未升级过的人员。按以上所示，通过指定要兼顾的最大旧版本数，明确指定哪几版，并且确保在【dist_electron】文件夹中存在所指定的旧版exe文件

  1. 再次运行工程的打包命令，结束后，会在【dist_electron】文件夹中生成【最新版本号-win-deltas】的文件夹，内有增量更新包exe和delta-win.json文件

此时，增量更新包就打好了，当然外层的【dist_electron】中还保留着最新版的全量安装包，将以上增量包文件夹中的所有文件复制到【dist_electron】中

注意：增量时也需要使用latest.yml文件

将这些文件直接上传到vue.config.js的publish url中

客户端就能收到更新通知了（看名字x.x.x-to-y.y.y就能知道是从哪一版更新到最新版）。

  1. 写在最后

全量包和增量包都存在的情况下，会优先使用增量更新；

所谓的强制更新指的是在用户login页面，控制更新通知弹窗是否可关闭来实现的；

由于是对安装文件exe的整体二进制差分生成增量更新包，所以对【app.asar】以外的exe及dll等资源文件也可更新；

增量打包后，会在工程文件夹下生成【cache】文件夹，可手动删除即可；

代码例链接如下 ：

https://gitee.com/lykiao/electron-delta-update-sample.git

个人笔记记录 2021 ~ 2025