记录第一次把vue项目打包成桌面应用(exe)

写的项目是在环信上下载的一个web IM即时通讯的一个小demo，几乎不用改什么，需要把这个vue2.0版本的打包成一个exe的桌面应用，刚开始可把我给愁坏了

electron

1.先去electron的官网上clone了一个例子

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

把项目跑起来

//用编辑器打开项目
npm install
npm start

此时就可以看到官方demo
2. 回到vue项目中运行

把electron文件中的main.js文件复制一份到vue项目中，重命名改为electron.js
在dist文件中也复制一份electron.js
把mainWindow.File('index.html')
在electron文件复制一份package.json文件到dist文件下
"main": "electron.js"

//运行打包
npm run build

3.把打包好的dist目录放到electron文件中，把项目目录下的index.html文件删除

//把main.js中的地址
mainWindow.File('index.html')
//改为
mainWindow.File('./dist/index.html')
//我直接使用的是线上的地址打包的
 mainWindow.loadURL('http://s.***888888888.com')

//运行
npm start  //你的项目就启动了

4. 下面就要把文件打包成exe格式

npm install electron --save-dev //安装electron 
npm install electron_build --save-dev //这个是打成exe文件的插件

在package.json里面添加

"electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./src/assets/favicon.ico --overwrite"

6.然后开始打包

npm run electron_build

打包后会生成electron-quick-start-win32-x64文件夹，文件面会有一个exe文件

双击打开

就ok啦