一、vue项目引入electron-builder
这里相当于前言
使用vue-cli构建electron应用，使用vue add electron-builder，添加打包工具，安装成功后，去（package.json文件）查看scripts中会自动生成两条命令：
图片.png
使用 npm run electron:serve 可以以桌面应用的形式打开所构建的vue项目
使用 npm run electron:build 可以打包所构建的vue项目，生成exe格式的可执行文件，然后就可以安装使用了。
二、但是打包的过程充满了艰辛。因为打包要使用到三个依赖工具：
-
electron-v9.0.2-win32-x64.zip 和 SHASUMS256.txt-9.0.2 这里的v9.0.2是当下的最新版本，可以按照项目所需的版本来安装。
下载地址：https://npm.taobao.org/mirrors/electron/ 选择好对应的版本之后，下载适合系统的包，并且拉到最下边，下载 SHASUMS256.txt 文件（验证文件，一定要下）。 -
winCodeSign-2.6.0 这也是执行打包命令时，所要求我下载的版本，可以按照项目所需进行下载安装。下载地址在打包的过程中会给出。下载等待时间特别漫长。
图片.png
-
nsis-3.0.4.1 这也是执行打包命令时，所要求我下载的版本，可以按照项目所需进行下载安装。下载地址在打包的过程中会给出，但是国内下载出错的几率十分大。我就下载不成功。
图片.png
三、接下来讲解一下如何解决：
- 针对electron-v9.0.2-win32-x64.zip和 SHASUMS256.txt-9.0.2我首先给electron添加了淘宝镜像。
在终端中敲入： npm set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
打开C盘，在你当前用户下搜索 .npmrc 文件，用记事本打开，看看是否设置成功。
图片.png
如果生成的只有下面一句，那么手动吧上面的加上，保存。
如果还担心下载不成功，那么就直接下载下来吧。按照二、1 中的地址下载两个文件。将zip文件和解压后的文件夹以及SHASUM验证文件放到 C:\Users\Administrator\AppData\Local\electron\Cache 目录下。
图片.png
-
针对 winCodeSign-2.6.0 下载失败，大部分是网络原因，先行在github下载的速度也一样龟速，但起码看得见速度，也不会满屏报错。打开地址：https://github.com/electron-userland/electron-builder-binaries/releases 寻找你所需要的版本。
图片.png
下载完之后解压到同名文件夹中。然后 C:\Users\Administrator\AppData\Local\electron-builder\Cache 进入到此目录下，新建一个文件夹，名为： winCodeSign ，再把刚刚解压出来的文件夹放到这个文件夹中。（注意看图中路径！！）
图片.png
-
针对 nsis-3.0.4.1 下载失败，大部分是网络原因，先行在github下载也一样龟速，但起码看得见速度，也不会满屏报错。打开地址： https://github.com/electron-userland/electron-builder-binaries/releases 寻找你所需要的版本。
图片.png
下载完成后，打开此zip包，但不是所有文件都需要。我们需要其中两个文件：nsis 和 nsis-resources
图片.png
将这两个文件夹提取出来。重命名：其中 （nsis -> nsis-3.0.4.1 ） （nsis-resources -> nsis-resourcers-3.4.1）
然后 C:\Users\Administrator\AppData\Local\electron-builder\Cache 进入到此目录下，新建一个文件夹，名为： nsis ，再把刚刚解压出来的两个文件夹放到这个文件夹中。
在这里插入图片描述
如果在nsis中出现如图以下问题，直接复制它给的地址下载完回来替换相应的版本即可
图片.png
四.开始打包
至此，已经完成了打包的三个工具的安装，回到项目中执行：
npm run electron:build 进行打包。
图片.png
如果是这样，那么就恭喜了，完美打包完成！！
如果不是，上面三个工具还是downloading的话，返回上一步重新看有没有漏掉什么。
再如果是出现如下问题的话
图片.png
图片.png
问题的原因是路径中包含有中文，让electron-builder能识别中文，我们需要去修改项目文件中
node_module/app-builder-lib/out/targets/nsis/NsisTarget.js 的executeMakensis方法
//新增支持中文代码
args.push("-INPUTCHARSET", "UTF8");
新增位置如图所示
图片.png
好了，相信做到这一步的都已经完成了打包
打包成功后会在根目录下多出一个 dist_electron 的文件夹，打包好的文件都在里面，包括exe格式文件，双击就可以执行安装了！
————————————————
本文根据https://blog.csdn.net/michaelxuzhi___/article/details/106568543进行重要补充和说明，对常见的electron打包坑进行总结。如需转载，请附上原文链接。
--------------------------------------结尾撒花-----------------------------------
网友评论