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接口,不知道是否可以调用接口

猜你喜欢

转载自blog.csdn.net/qq_36802917/article/details/84626299