# **将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
```
