预期目标

本文假定读者已经能够顺利开发Vue（2.x）项目，并期望使用Electron把项目打包成桌面客户端的形式（Windows平台，64位）。

项目准备

确保现有的Vue项目已经能够正常运行并可通过npm run build命令进行编译部署，这里需要注意编译后的资源路径问题。
默认情况下，Vue CLI会假设应用是被部署在一个域名的根路径下，如果是被部署在一个子路径下，则需要把publicPath设置为空字符串或相对路径：

// vue.config.js 存放在项目的根目录下，与package.json同级
module.exports = {
    publicPath: './'
}

另外，本案例使用到的工具/库版本如下：

node v14.15.0
npm v7.20.6
yarn v1.22.11
@vue/cli v4.5.13

安装electron-builder

在项目目录下执行 vue add electron-builder 命令，安装electron-builder插件。
在这里插入图片描述
按照提示，选择要安装的Electron版本后，会自动安装相关依赖包。

如上所示，虽然提示已成功安装了electron-builder插件及相关依赖，但后续执行electron:serve或electron:build命令时，大概率会报错：electron包没有安装成功，请删掉node_modules后重新安装！
这时即使删掉node_modules，用npm或cnpm重新安装所有包，仍然不会成功，这是因为npm对electron相关依赖包的解析有问题。
这里在删掉node_modules后，可以使用yarn代替npm重新安装所有的包。

安装electron-builder插件成功后，插件会自动修改package.json文件，并在src目录下生成background.js客户端配置文件。
在这里插入图片描述

调试electron:serve

在项目目录下执行 npm run electron:serve 命令，打开网页及客户端调试模式。
在这里插入图片描述
使用Electron打包的客户端，本质上是在内部集成了一个chrome浏览器内核，然后用其渲染HTML页面，并且自带与浏览器一致的开发者工具，支持热更新。

打包electron:build

在项目开发完成后，可以通过npm run electron:build 命令把项目打包成最终的PC客户端。
第一次打包时，因为从github网站下载打包需要的系统文件时速度非常慢，大概率会卡在Downloading阶段，最终导致打包失败。
在这里插入图片描述

这时可以手动从github下载相关文件（共4个压缩包），并放到指定目录下：

C:\Users\Neo\AppData\Local\electron\Cache
- electron-v12.0.17-win32-x64.zip
C:\Users\Neo\AppData\Local\electron-builder\Cache\nsis
- nsis-3.0.4.1.7z
- nsis-resources-3.4.1.7z
C:\Users\Neo\AppData\Local\electron-builder\Cache\winCodeSign
- winCodeSign-2.6.0.7z

以上系统路径及文件名仅做参考，不同系统用户及版本会有不同，根据cmd中的提示下载对应版本。

手动下载完成以上文件后，重新执行npm run electron:build进行打包。
在这里插入图片描述