背景
在完成直播功能以后,需要一个显示直播时用户的评论(即时通讯)的应用,之前没有接触过桌面应用,没想到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
的安装包,还是太天真
将桌面应用转为安装包
这里有一个教程,比较简单,按步骤来就可以了,链接
如果你和我一样,在第二步遇到选择安装程序语言时,安装程序语言一栏没有选项的问题,主要它是还是必填项???
可以参考这个的解决方案