实现思路：从electron官网上拉取代码，把官网上拉取下来项目中的index.html替换成 自己vue项目打包好的dist文件中的index.html，输入打包exe的命令即可；
- 拉取electron官网上的demo，拉下来之后安装依赖，项目跑起来之后，就不用管demo了，开始配置自己的Vue项目
git clone https://github.com/electron/electron-quick-start
npm i
npm run start
- 修改自己项目的
vue.config.js，路径必须修改为./，不是这个后续打包好的页面可能会出现白屏，加载不出来的情况
module.exports = {
publicPath: './',
}
- 打包自己的Vue项目
npm run build
- 将打包出来的 dist 文件夹复制到之前拉取的 electron-quick-start 文件夹中，和
node_modules同级就行
- 然后自己的项目就不用管了，剩下的就交给拉下来的 electron-quick-start 项目
- 在 electron-quick-start 项目中，下载打包需要的依赖
electron-packager
npm install electron-packager --save-dev
进入 electron-quick-start 项目，删除项目根目录下的
index.html文件在 electron-quick-start 项目中找到入口文件
main.js，修改打包的文件路径为我们的index.html（替换成我们的文件非常非常的重要，注意行数，一般都在16行多一点）
// main.js 原始内容
mainWindow.loadFile('index.html')
// 修改后的内容
mainWindow.loadFile('./dist/index.html')
- 在 electron-quick-start 项目中，进入
package.json，在 scripts 中添加packager指令，如下所示：
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
}
- 运行命令打包，然后项目中会出现一个 App-win32-x64 的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件
npm run packager
打包完以后，项目中会出现 App-win32-x64 文件夹，进去之后，双击App.exe就可以访问了；
image.png
- 打包时会出现node版本不匹配问题，升级node版本到14.17.5
node -v
nvm list
nvm install 14.17.5
nvm list
nvm use 14.17.5
nvm alias default 14.17.5 // 修改默认的node版本，否则vsCode中的node版本会不一样
打包时mac会报没有windows包的问题
- image.png
