vue+cordova开发混合app

这篇文章主要记录了我自己的vue项目如何和cordova结合，最后编译成安卓app

 

一、安装cordova

npm install -g cordova

ordova安装时不能使用cnpm 应该使用npm，cnpm虽然快但是后期出的错绝对比这省下来的时间多得多

二、创建cordova应用

cordova create oneApp

 

三、创建vue项目（用已有的项目也可以）

 

四、把vue项目放到cordova应用项目文件夹中

五、修改vue项目config/index.js文件

 

六、对vue项目进行build

执行npm run build

编译之后打包生成的代码自动跑到主目录下的WWW文件下

 

七、在cordova应用目录执行cordova build iOS、cordova build Android等

在这一步，遇到的问题比较多。

执行cordova build Android，报错

这个提示没有安卓平台 那就执行 cordova platform add android

添加平台后，再次执行cordova build Android，报错

提示没有安卓路径，说明电脑没有安卓环境，要去配置安卓环境。

我是先下载sdk maneger 地址：http://tools.android-studio.org/index.php/sdk/

 

我下了压缩包，解压后会看到sdk manager.exe

打开后选择sdk下载

我下载了圈起来的，下载完后配置环境变量，具体操作自行百度

配置完后再在cordova应用的目录下执行 cordova build Android

这时候跑错

Could not find an installed version of Gradle either in Android Studio, or on your system to install

差不多是这个错，忘记截图了

解决方法：

1、手动下载gradle

gradle-x.x-bin.zip （x.x代表版本） 

根据需要下载某一版本 

地址： 

(https://services.gradle.org/distributions)

2、添加环境变量

PATH=C:\Program Files\gradle-x.x\bin

 

再次执行cordova build Android

这时候开始下载大量东西

最后提示

编译失败，看了一下是路径有中文变成乱码的问题，于是改了文件夹名字，再执行cordova build Android

终于成功了

apk在框起来的路径中，oneapp是我的cordova应用目录

 

以上是我测试将两者结合的过程，vue项目中还没调用cordova接口，不知道是否可以调用接口