electron-builder打包踩过的那些坑

本文为Electron+Vue3开发桌面端软件系列文章第二篇

通过本文，你将获得：

1. Electron项目如何打包
2. 打包过程中异常项报错的处理方案

打包

查看package.json中scripts:

"scripts": {
  "format": "prettier --write .",
  "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
  "start": "electron-vite preview",
  "dev": "electron-vite dev",
  "build": "electron-vite build",
  "postinstall": "electron-builder install-app-deps",
  "build:win": "npm run build && electron-builder --win --config",
  "build:mac": "npm run build && electron-builder --mac --config",
  "build:linux": "npm run build && electron-builder --linux --config"
},

首先执行pnpm postinstall

因为本文项目是在Windows上，执行pnpm build:win

在没有异常情况下，会在根目录下打包输出dist文件夹，如下图所示：

dist下exe是可执行的安装包文件，将这个exe文件分享给你的朋友，就可以让他安装你的软件了。

异常情况

不出意外的话就是出意外了。

我遇到的异常是在electron-builder打包过程中会自动下载依赖的包，由于网络缘故下载总是失败，科学上网的前提下也不行。

winCodeSign-2.6.0.7z 下载失败

在打包构建时，会从https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z这个地址下载winCodeSign-2.6.0.7z这个包。

解决方案：

在浏览器打开：github.com/electron-us...

找到winCodeSign-2.6.0一栏，在它的Assets中下载第一个7z和第二个zip文件。

将下载的包放入对应的目录下，Windows下的地址：%LOCALAPPDATA%\electron\cache

nsis-3.0.4.1.7z 下载失败

重新打包，出现新的报错。

需要从https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z地址下载nsis-3.0.4.1.7z这个包，下载失败导致的报错。

解决方案：

在上文中下载的Source code(zip)，本地进行解压，其中就会有我们需要的nsis-3.0.4.1这个包。

在其中找到nsis，重命名为nsis-3.0.4.1，命名规则是根据打包报错中需要下载的文件命名的，https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z，需要下载的就是nsis-3.0.4.1这个文件。

将文件放在对应的目录下，Windows下地址是%LOCALAPPDATA%\electron-builder\Cache\nsis

nsis-resources-3.4.1.7z 下载失败

重新打包，出现新的报错。

报错截图如下，是找不到nsis-resources-3.4.1.7z这个包。

解决方案：

还是在之前下载的Source code(zip)文件中会有我们需要的，并且重命名为nsis-resources-3.4.1

将文件放在对应的目录下，Windows下地址是%LOCALAPPDATA%\electron-builder\Cache\nsis

再次执行打包，完美输出，没有异常报错。

总结

1. 在package.json查看打包命令
2. 一般由于网络原因的打包异常，可单独下载依赖包，在报错信息中可以窥看到需要的依赖包名称和下载的地址。