# **將Vue項目打包為Windows應用(.exe)**
## **第一步:把electron的官方例子扒下來。**
```
git clone https://github.com/electron/electron-quick-start
```
## **第二步:進入我們自己的vue項目進行打包。**
## **第三步:將打包出來的 dist 文件夾復制到之前下載的文件夾中**
## **第四步:進入剛才下載的項目,刪除項目根目錄下的 index.html 文件。**
## **第五步:在下載項目中找到入口文件 main.js ,修改打包的文件路徑為我們的index.html。**
```
// main.js 原始內容
mainWindow.loadFile('index.html')
// 修改后的內容
mainWindow.loadFile('./dist/index.html')
```
第六步:在下載項目中檢查 package.json 的命令,正常情況下,運行下列指令即可進行打包效果預覽。
```
// 國內網絡下載electron可能很慢,建議設置
// npm config set registry https://registry.npm.taobao.org/
// npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
npm install
npm run start
```
## **第七步:在下載項目中,下載打包需要的依賴 electron-packager**
```
npm install electron-packager --save-dev
```
## **第八步:在下載項目中,進入 package.json ,在 scripts 中添加 packager 指令。**
```
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此處為添加命令
}
```
### 如果你想修改最后打包出來的exe文件圖標,類似于favicon,或者EXE的名字,可以設置 packager 的指令內容為,icon的路徑自己調整下哦
```
"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"
```
## **第九步:運行命令打包,然后項目中會出現一個 App-win32-x64 的文件夾,這個文件就是打包好的桌面應用,文件夾里有一個 App.exe 文件。**
```
npm run packager
```