将Vue项目打包为桌面应用（.exe）

背景

在完成直播功能以后，需要一个显示直播时用户的评论（即时通讯）的应用，之前没有接触过桌面应用，没想到vue的功能这么强大，网上有很多比较成熟的方案，我们选择electron（因为用的比较多，有问题比较好查询）

即时通讯

之后补充

过程

在学习的过程中，发现两种打包的方法：
第一种是将自己的vue项目打包，放到官方的demo文件中，改变打包路径
第二种是在自己的vue的项目中引入插件，然后打包
再尝试了两种方案后，我们果断选择第一种，因为第二种需要配置的文件太多了，各种路径。下面详解一下第一种方案，这里奉上第二种的别人的解决方案，写的很不错

vue打包为桌面应用

首先把electron的官方例子clone下来

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

如何把项目跑起来就不说了
找到项目的入口文件main.js，会发现它的打包方式，index.html是打包的文件路径

mainWindow.loadFile('index.html')

我们把自己的项目打包以后的dist文件拿过来，删掉原来的index.html，并修改它的入口文件main.js

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

在package.json中找一下它的命令，之后运行项目

npm run start

成功以后会出来一个桌面应用，有没有觉得很眼熟？
打包需要electron的依赖electron-packager

cnpm install electron-packager --save-dev

在package.json中添加命令

"scripts": {    "start": "electron .",    "packager": "electron-packager ./ App --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite"//此处为添加命令
  }

然后运行命令打包

npm run packager

然后项目中会出现一个App-win32-x64的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个App.exe文件，App.exe就是这个项目的启动文件
打包好的文件是不是和想象中不太一样，我以为打包好的应该就是一个.exe的安装包，还是太天真

作者：大E的鹅
链接：https://www.jianshu.com/p/2edf5ed7ffaf