前言： 公司已有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文件夾中看到生成的可執行文件夾，里面有可執行文件。

總結

以上是生活随笔為你收集整理的electron打包现成的vue项目成.exe文件，build打包vue项目（quasar 框架）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。