一、在我使用vue-cli构建electron应用后,使用vue add electron-builder,添加打包工具,安装成功后,脚本中会多出两条命令:
使用 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 这也是执行打包命令时,所要求我下载的版本,可以按照项目所需进行下载安装。下载地址在打包的过程中会给出,我用是VScode,crtl+click 即可转到对应的下载页面。下载等待时间特别漫长。
-
nsis-3.0.4.1 这也是执行打包命令时,所要求我下载的版本,可以按照项目所需进行下载安装。下载地址在打包的过程中会给出,但是国内下载出错的几率十分大。我就下载不成功。
三、接下来讲解一下如何解决:
-
针对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 文件,用记事本打开,看看是否设置成功。
如果还担心下载不成功,那么就直接下载下来吧。按照二、1 中的地址下载两个文件。解压后放到 C:\Users\Administrator\AppData\Local\electron\Cache 目录下。 -
针对 winCodeSign-2.6.0 下载失败,大部分是网络原因,先行在github下载的速度也一样龟速,但起码看得见速度,也不会满屏报错。打开地址:https://github.com/electron-userland/electron-builder-binaries/releases 寻找你所需要的版本。
下载完之后解压到同名文件夹中。然后 C:\Users\Administrator\AppData\Local\electron-builder\Cache 进入到此目录下,新建一个文件夹,名为: winCodeSign ,再把刚刚解压出来的文件夹放到这个文件夹中。 -
针对 nsis-3.0.4.1 下载失败,大部分是网络原因,先行在github下载也一样龟速,但起码看得见速度,也不会满屏报错。打开地址: https://github.com/electron-userland/electron-builder-binaries/releases 寻找你所需要的版本。
下载完成后,打开此zip包,但不是所有文件都需要。我们需要其中两个文件:nsis 和 nsis-resources
将这两个文件夹提取出来。重命名:其中 nsis -> nsis-3.0.4.1 nsis-resources -> nsis-resourcers-3.4.1然后 C:\Users\Administrator\AppData\Local\electron-builder\Cache 进入到此目录下,新建一个文件夹,名为: nsis ,再把刚刚解压出来的两个文件夹放到这个文件夹中。