Vue 2.0 + cordova 构建Android应用（一）

1、环境准备（Windows、Android）

一、官方安装参考

包括Java、Android SDK 及相关环境变量配置

二、Node.js

安装Node.js（主要是为了使用npm安装cordova、vue），当前选择稳定版6.9.x LTS 便可

三、Android SDK

建议直接下载安装Android Studio，当前版本2.2.2.0

选择包含 Android SDK 的安装包，安装完毕后打开SDK配置路径中的SDK Manager.exe，下载所需版本Android SDK Tool和对应SDK Platform，建议真机开发调试。

下载速度慢或没法下载，则使用代理，配置以下，或可以使用其余代理路径

四、Cordova

参照官方指南首页，安装Cordova、配置已下载的SDK环境变量，并按照指南进行初步测试

cordova 相关命令参考：http://cordova.apache.org/doc...

注意命令中的各类默认设置

假设构建名为cordovaApp的项目

cordova create cordova-app com.lxlazy.www.app cordovaApp
cd cordova-app
cordova platforms add android

命令行提示项目中已默认安装 cordova-plugin-whitelist 插件。

检查总体环境是否正确，注意查看提示

cordova requirements

建议使用真机调试，记得打开USB调试模式

cordova run

---

注意：首次使用时，命令行提示 Downloading https://services.gradle.org/distributions/gradle-2.14.1-all.zip，是在下载对应的gradle并自动解压安装，根据网络情况，可能耗时极长，且容易报错。

windows环境下，在命令行窗口下载安装时，点击窗口内部，会使其暂停下载工做，有下载进度提示的时候才能够看出来。按下Esc键就能继续工做。坑我好几回。固然也可以使用VSCode控制台代替。

也可以使用如下方法：找到如 cordova-app/platforms/android/cordova/lib/buildersGradleBuilder.js，其中有

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] ||'https\\://services.gradle.org/distributions/gradle-2.14.1-all.zip'

根据路径，使用迅雷等工具下载对应安装包，并修改上述语句中的外链为已下载好的路径，如，将gradle-2.14.1-all.zip放在了D盘根路径，则修改成

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'file:///gradle-2.14.1-all.zip';

而后从新运行cordova build 或 cordova run

缺点是每新建一个工程就得改一遍，固然速度快多了

---

五、Vue.js

参照官方指南，使用官方脚手架 vue-cli 初步构建项目：http://vuejs.org/v2/guide/ins...

该项目将与以前的cordovaApp项目整合，假设为vueApp（默认使用vue-router、标准ESLint，不用测试模块，由于并不复杂）

vue init webpack vue-app
cd vue-app
cnpm install

只在下载包时使用cnpm命令加快下载速度，其余状况最好使用npm或 yarn（然而官网太难进），不然可能出现各类问题……

npm run dev

注意界面上的各类地址

六、Visual Studio Code

没什么好说的，相比 sublime text 而言，插件化定制等功能更加方面好用，并且免费

---

2、项目整合

即：将vue-app项目默认的构建位置dist目录修改成cordova-app项目中的www目录，并可以使用cordova命令直接运行在手机端

一、构建

给出vue项目构建须要修改的地方，如图所示

修改后，npm run build 会将工程打包到与 app-vue 项目同级的 app-cordova 项目下

└── www
    ├── css
    ├── fonts
    ├── img
    ├── js
    └── index.html

不知道为何以前这样是报错的，须要把img文件夹移动到css文件夹下，后来莫名其妙就行了……

二、vue 本地调试

至少在index.html中添加

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

在浏览器运行后，打开控制台，切换成设备视图，跟普通html界面同样调试，开发模式下，可以使用vue-devtools浏览器拓展插件获取有效界面信息。如图

三、Cordova 本机调试

将构建好的项目运行在手机端，USB链接手机，打开调试模式

注意：一切正常但仍是安装出错，一、卸载以前的app；二、确认容许cordova安装。我没遇到过其余的了

打开 Chrome 浏览器，输入地址chrome://inspect，默认进入 chrome://inspect/#devices，将在页面显示当前可用设备，点击连接弹出控制台界面，而后跟普通页面同样调试