Vue+cordova打包混合app

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue+cordova打包混合app

cordova介绍

可以把html css js 写的代码打包成app，还可以让js调用原生的api.



安装cordova

cnpm i cordova -g
//或者
npm i -g cordova --registry=https://registry.npm.taobao.org

安装cordova报错的解决办法

  • 卸载 cordova npm uninstall -g cordova

  • 删掉 C:\Users\Hub\AppData\Roaming\npm\node_modules\ 中的cordova

  • 重试上面的bash命令

查看cordova版本

cordova -v


创建项目

cordova  create 项目名称
cordova create 项目名称 com.公司名.项目名 类名 (建议使用这种)
cordova create cordovademo02  com.xxx.cordova  cordovademo02

创建项目的时候注意包名称，发布上下打包的时候要用到包名称。


  • cd到项目文件夹中，添加android的平台到项目里面

cordova platform add android


  • 把项目导入到android studio进行调试 (或者运行 cordova run android)

  • 运行项目

    • android手机要连上电脑，并且android手机必须开启调试模式

    • android studio 必须按照手机对应的sdk

  • 修改项目完成 cordova prepare



  • 执行命令 cordova prepare


  • 重新build


  • cordova 里面要调用原生的功能， cordova plugin add 插件名称

  • cordova plugin list 看当前有哪些插件


cordova打包vue项目成app

三步走

  • npm run build 发布vue项目 注意图片的目录路径

  • 把vue打包后的静态资源赋值到cordova项目里面

  • 运行cordova prepare

  • 运行cordova build 打包成apk

  • 生成签名可以参考这个 https://www.cnblogs.com/qirui/p/8421372.html

cordova 打包遇到ajax请求没有数据返回

前言：为保证用户数据和设备的安全，Google针对下一代 Android 系统(Android P) 的应用程序，将要求默认使用加密连接，这意味着 Android P 将禁止 App 使用所有未加密的连接，因此运行 Android P 系统的安卓设备无论是接收或者发送流量，未来都不能明码传输，需要使用下一代(Transport Layer Security)传输层安全协议，而 Android Nougat 和 Oreo 则不受影响。


因此在Android P 使用HttpUrlConnection进行http请求会出现以下异常
解决的办法简单来说可以通过在AnroidManifest.xml中的application显示设置

<application android:usesCleartextTraffic="true">








在Android P系统的设备上，如果应用使用的是非加密的明文流量的http网络请求，则会导致该应用无法进行网络请求，https则不会受影响，同样地，如果应用嵌套了webview，webview也只能使用https请求。
二、针对这个问题，有以下三种解决方法：


（1）APP改用https请求
（2）targetSdkVersion 降到27以下
（3）更改网络安全配置

cordova build命令安装 报错Failed to find \'ANDROID_HOME\' environment variable.

配置环境变量 参考 https://blog.csdn.net/jumtre/article/details/52635290

Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio

解决办法参考：https://blog.csdn.net/bluefish_flying/article/details/78012262

Failed to apply plugin [id \'com.android.internal.version-check\'] Minimum supported Gradle version is 6.1.1. Current version is 4.10.3. If using the gradle wrapper, try editing the distributionUrl in E:\code\cordovademo02\gradle\wrapper\gradle-wrapper.properties to gradle-6.1.1-all.zip 的报错

解决办法 ：gradle 插件版本 和gradle版本相对应。





  • 打包



  • 打包未签名的apk

cordova build android --release



处理debug-apk无法在真机和模拟器运行的问题

  • 需要在build.gradle文件中添加下方语句

android.injected.testOnly=false



apk签名

vue中调用原生的api

  • 使用vue-cordova插件



  • 直接使用

index.html引入cordova.js 并定义全局变量让vue组件里面直接使用cordova插件。

以上是 Vue+cordova打包混合app 的全部内容， 来源链接： utcz.com/z/376980.html

回到顶部