Vue项目打包桌面应用(electron)

近期准备更新两篇文章,一直没有时间来写。一篇是想说说如何使用Electron将Vue项目打包成桌面应用。另一篇是关于Vue框架input组件的个性使用,包括键盘的监听,脱离鼠标操作等等,这个暂时搁置,看看周末有没有时间写写吧。

今天主要说一下如何将使用vue-cli脚手架快速搭建的项目,打包成PC端的桌面应用。这里我使用的工具是electron官方文档

顺便了解一下Electron。Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个专注于桌面应用的 Node. js 的变体,而不是 Web 服务器。这不意味着 Electron 是某个图形用户界面(GUI)库的 JavaScript 版本。 相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器。      

开始之前,可以先了解一下官方文档里打造第一个Electron应用 --- electron-quick-start 这是一个最基本的Electron应用demo。从GitHub下载下来看看electron-quick-start


假设已经使用vue-cli快速构建了一个项目,如果还没有的话可以看看基于vue-cli快速构建,这篇简书描述得很细致。

1.打开终端进入Vue项目的目录

$npm run build  运行后项目内会出现dist文件夹

2.更改路径


1.jpg

在项目config - index.js - build: - assetsPublicPath  修改为相对路径 ./

3.Vue 中引入Electron,首先在vue项目的package.json中加入Electron的依赖,

$npm install electron --save-dev //添加依赖

$npm install electron-packager --save-dev //这个是打成exe文件的插件

4.把electron-quick-start项目中的main.js复制到新建vue的build文件中,并改个名字electron.js。路径修改为下面的截图一样:./dist/index.html


2.jpg

5.同时复制一份electron.js 到dist文件夹下。注意这时的路径就不是./dist/index.html,直接改成index.html即可

6.在package.json文件中增加一条指令"electron_dev": "npm run build && electron build/electron.js",用来启动electron,如图:


3.jpg

7.复制一份package.json文件到dist文件夹下。

8.修改dist/package.json main入口为:"main": "electron.js",

先说明一下,electron_dev 就是用来启动electron的,在此之前我们一定要确保项目当中已经有构建好的静态资源文件,因此 在运行 electron build/electron.js 之前,首先运行 npm run build。

经过这样的处理,在命令行中,运行 npm run electron_dev之后,就会将自己的Vue项目显示成桌面应用。

至此,这还没算打包,下面接着说如何打包成应用程序。这里都是手动配置electron打包,实际上使用vue-electron脚手架更便捷,有时间再来说。

9.在package.json文件为之前下载好的electron-packager,再手动增加一条启动命令"electron_build": "electron-packager ./dist/ --arch=x64 --overwrite"。注意:dist文件内的package.json也要加上这条指令。


4.jpg

其实这条指令有很多参数的,包括打包的平台,应用图标等等,我只是省略了都没写,使用默认。

10.$npm run electron_build  执行后即可在项目文件夹内看到打包好的桌面应用。

最后需要提一下,我使用的是Mac 所以打包出来的应用是供Mac运行,如果想要运行在Windows上的话,如果不怕费事可以重新按照步骤重来一遍。当然也可以把压缩包传到Windows电脑上,如果传压缩包切记要重新安装依赖,即把node_modules文件删除,然后cmd 命令 输入 npm install  重新生成node_modules依赖。最后再输入命令npm run electron_build打包即可出现.exe可运行程序。

有机会再说说vue-electron。

推荐阅读更多精彩内容