前言： 公司已有web端vue项目，现在有需求，需要把web端的该项目用electron打包成 .exe 可执行文件。

思考：打包成 .exe 文件，首先需要将vue项目在本地打包成静态可运行文件，其次使用electron将build后的文件打包成 .exe 可执行文件。

步骤：
一、 在 quasar.conf 文件中进行构建配置，位置在build属性下面：
1、
具体配置哪些配置项，可以参考quasar官方文档：quasar.conf.js build 属性配置

build: {
      // vueRouterMode: "history", // available values: 'hash', 'history'  一定要把这个注释掉
      publicPath: "/llllll/electron_demo/csy-vclass-osc-app/dist/spa",
    
      }
    },

注意：publicPath 这个公共路径必须设置为与打包位置一致，否则运行文件会出现资源找不到的报错。

2、 在控制台运行 quasar build 生成打包文件，默认在dist文件夹的spa里面，控制台输入如下内容则表示构建成功

最后一行 为打包生成的文件所在路径，也就是在quasar.conf.js中设置的publicPath。
最后生成一个文件夹如图，直接打开index.html正常显示即可。
到此vue项目构建打包已经完成。
注意：如果index.html打开是空白的，打开控制台查看是否是资源路径配置的问题

二、 下载electron
1、 由于github比较慢，这里使用gitee中的项目，克隆该项目即可https://gitee.com/shf0824/electron-quick-start.git

git clone https://gitee.com/shf0824/electron-quick-start.git

2、 双击项目中index.html文件，运行，可以成功看到下图即可
三、 用electron打包dist中的文件生成.exe文件
1、 将dist/spa中的所有文件放到克隆下来的electron项目的根目录中
2、 安装electron-packager插件。确保在electron项目中，在控制台输入如下命令安装插件

npm install electron-packager --save-dev

3、在electron项目中，package.json文件中，"scripts"属性下面添加如下代码

"pack": "electron-packager . 'health-terminal' --platform=win32 --arch=x64  --out=./out --asar --app-version=0.0.1"

4、 执行 npm run pack 使用electron将文件打包成 .exe 文件。
成功的话，默认会在electron根路径下的out文件夹中看到生成的可执行文件夹，里面有可执行文件。