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