1、環(huán)境準備

系統(tǒng)版本 windows 10

λ node -v
v12.19.0

λ vue -V
@vue/cli 4.5.7

λ npm -v
6.14.8

image

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

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

image

3、測試官方例子

安裝cnpm
因為npm安裝太慢了所以安裝cnpm
npm ``install -g cnpm --registry=https:``//registry``.npm.taobao.org
cd``到electron-quick-start 文件夾中
然后輸入命令
cnpm ``install

image

然后輸入
npm run start
出現(xiàn)下面界面表示clone的項目沒問題

image

4、安裝electron-packager

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

命令說明： 
* location of project：項目所在路徑 
* name of project：打包的項目名字 
* platform：確定了你要構(gòu)建哪個平臺的應(yīng)用（Windows、Mac 還是 Linux） 
* architecture：決定了使用 x86 還是 x64 還是兩個架構(gòu)都用 
* 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</pre>

image.png

5、輸入打包命令

然后輸入命令
npm run packager

image

最終效果

image

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

npm run build

image

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

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

image

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

image

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

image

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

npm run packager

image