vue項目使用electron打包成exe

1、環境准備

系統版本 windows 10

λ node -v
v12.19.0

λ vue -V
@vue/cli 4.5.7

λ npm -v
6.14.8

 

 2、將electron官方打包例子克隆下來

git clone https://github.com/electron/electron-quick-start 

 

 

3、測試官方例子

安裝cnpm

因為npm安裝太慢了所以安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

cd到electron-quick-start 文件夾中

然后輸入命令
cnpm install

　　

 

然后輸入

npm run start
出現下面界面表示clone的項目沒問題

 

 

 4、安裝electron-packager

安裝
cnpm install electron-packager --save-dev 

配置package.json中的npm腳本命令，
"scripts": { 
"start": "electron .", 
"packager": "electron-packager ./ App --platform=win32 --arch=x64  --overwrite"//此處為添加命令
} 



命令說明： 
* location of project：項目所在路徑 
* name of project：打包的項目名字 
* platform：確定了你要構建哪個平台的應用（Windows、Mac 還是 Linux） 
* architecture：決定了使用 x86 還是 x64 還是兩個架構都用 
* electron version：electron 的版本 
* optional options：可選選項
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

打包命令參考https://blog.csdn.net/a1170201028/article/details/59108126

 

 5、輸入打包命令

然后輸入命令
npm run packager

 

 

 

最終效果

 6、將vue項目生成dist文件后放到打包文件夾

npm run build

 

 

 

7、修改打包文件的index.html位置

mainWindow.loadFile('./dist/index.html')

 

 

 

npm run start 
測試項目是否能跑起來

 

 

 

 

注意：如果出現白屏情況要檢查dist中的index.html中的引用文件的路徑是不是相對路徑

 

 

 

8、最后刪除掉測試打包的文件，然后運行打包命令將項目打包

npm run packager