Electron-vue 成功打包全流程

electron-vue打包流程

仅适用于windows系统

---

前言

一、打包流程

1. 安装electron提供的打包插件

代码如下（示例）：

在当前项目根目录下安装打包插件
npm install electron-builder
或全局安装
npm install electron-builder -g

2. 修改package.json文件

package.json 文件内容，可参考下面这篇文章
https://blog.csdn.net/mm_0123456789/article/details/122826523

3. 执行打包命令

代码如下（示例）：

npm run build

二、遇到的错误及解决方案

1. electron包下载错误

从github上找到对应版本并下载
https://github.com/electron/electron/releases
例：
同时下载对应的下所报文件与SHASUMS256.txt文件

下载后放在指定文件夹下：

2. WinCodeSign下载

第一步下载完成后，再次执行 打包操作
出现如下错误提示：

从github上找到对应的版本并下载，放在如下位置：
https://github.com/electron-userland/electron-builder-binaries/releases

3. nsis相关下载

再次执行打包操作，提示如下错误：

继续从github仓库下载对应版本的压缩包，放在如下位置：
https://github.com/electron-userland/electron-builder-binaries/releases

4. 再次执行打包操作

以上安装包下载完成并放在对应位置，即可打包成功，打包成功会在build文件夹中多出如下文件夹：

5. 本地安装

双击安装包开始安装，可修改安装路径：

安装成功后，桌面出现如下图标（注意：桌面图标为 ico 格式的图片文件，像素最低标准为 256*256）：

双击快捷方式可正常运行：

总结

以上就是electron-vue打包的全部流程，根据不同版本需求，下载对应的依赖包即可。