使用cordova构建基于vue的Android项目

参考：

cordova+vue 项目打包成Android（apk）应用

Cordova+Vue实现Android APP开发

Cordova - 使用Android Studio导入Cordova创建的Android项目

Cordova - 打包Vue项目的详细步骤（将Vue.js项目编译成App）

vue项目打包成手机apk,方式有两种：cordova ,hbuilder，这里介绍Cordova方法。

准备工作：

下载 jdk 、android sdk 和 node.js ， 并配置环境变量

一、npm安装 cordova

//安装
npm install -g cordova

//查看版本
cordova -v
cordova -version

二、webstrom 创建Cordova项目

新建Cordova项目，

注意此时可看到刚安装的Cordova安装路径

建好后目录如下：

三、webstrom 运行Cordova项目

设置构建命令：点击edit configuration，设置构建platform 和命令run，

然后用usb数据线连接手机，再点击运行即可。

Cordova命令有：

Help：显示可用CLI命令的信息。
Create：创建Cordova项目并关联项目文件夹和文件。
Plateform：管理Cordova项目使用的移动平台。
Plugin：管理Cordova插件的安装和卸载。
Prepare：从Cordova项目的www文件夹复制web应用内容到项目移动平台项目文件夹中。
Compile：把web应用打包成Cordova应用。
Build：先执行Prepare命令然后打包web应用。
Emulate：在一个或多个移动设备平台的设备模拟器中运行Cordova应用。
Run：在一个或多个移动设备中运行Cordova应用。
Serve：启动一个服务器加载web内容以便于用浏览器访问。

示例：
cordova build android

运行后可看到构建的apk路径，

手机上也可看到项目：

到此Cordova项目构建成功。

四、将vue build的内容导入到Cordova

先将Cordova的www目录下清空，并将vue项目中build生成的dist目录中的全部文件拷贝进Cordova的www目录下

再次运行Cordova run命令，手机上可看到：

到此vue项目导入到Cordova项目成功。

五、将Cordova项目导入到Android studio

打开Android studio 选择platform下的Android模块 进行导入：

导入后，可看到项目结构就是一个标准的Android项目了。

此后打包签名可在Android studio内进行即可。