html打包成桌面应用,将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的安装包，还是太天真

将桌面应用转为安装包

这里有一个教程，比较简单，按步骤来就可以了，链接

如果你和我一样，在第二步遇到选择安装程序语言时，安装程序语言一栏没有选项的问题，主要它是还是必填项？？？

可以参考这个的解决方案