手上有个跑得好好的 Vue 项目，产品突然说要上架应用商店。重写一套 React Native？没这个人力。学一遍 Ionic？那得连 Angular 一起学。这种时候 Cordova 是成本最低的一条路，它不要求你换框架，只是把你打包好的那堆 HTML、CSS、JS 塞进一个原生壳子里，再给你一座能从 JS 喊到原生的桥。
这篇是我当年把 Vue 项目用 Cordova 打成 App 的完整记录，从装环境、导 Android Studio（这一步的报错最多，占了小半篇幅），到装插件调相机定位，再到打包时那三处必改的路径配置。
在本篇文章中，我们将从浅入深，和大家一起学习以下知识：
Cordova、Ionic、React Native这些打包方案各自适合什么场景Android和iOS两套环境分别要装什么，创建项目时包名为什么必须一次填对- 导入
Android Studio最常见的五类报错，分别是什么原因、怎么解 Cordova插件的安装、查看、卸载，以及调原生能力的固定套路- 把
Vue打包产物塞进Cordova项目时，那三处不改就白屏的路径配置 - 在
Vue组件里调cordova插件的两种写法，以及为什么我不推荐用封装库 - 这套技术栈今天的维护状态
# 一、先说清楚这套方案现在的状态
这篇写于 2019 年。Apache Cordova 现在已经不再活跃维护，项目退役进了 Apache Attic 归档状态，具体以 https://attic.apache.org/ 上的官方公告为准，我不猜时间点。
所以你要是现在开新项目，别照抄这一套。同样的思路（把 Web 产物塞进原生壳、通过桥调原生能力）现在的主流实现是 Capacitor，它是 Ionic 团队做的，API 设计和 Cordova 一脉相承，甚至兼容一部分 Cordova 插件，但原生工程是作为源码提交进仓库管理的，出问题能直接改，不像 Cordova 那样每次 prepare 都重新生成。
那这篇还留着干什么？因为存量项目还在跑，出问题得有地方查；更重要的是，下面第四节那一整段 Android Studio 报错排查、第七节那三处路径配置，换成 Capacitor 也照样会遇到，它们本来就不是 Cordova 独有的问题，是「Web 产物跑在 WebView 里」这件事本身带来的。
# 二、Cordova 是什么，和别的方案怎么选
我们可以使用
cordova来打包现有的vue、react、angular应用为app，可以借助cordova来调用手机设备的原生能力，比如拍照、扫码、定位等
先把当年的几个选项摆开看。
# 2.1 Ionic 3 这条路
ionic3=cordova+angular+ionicUI（Ionic UI组件+ Javascript API+Ionic Native）
- 优点：它提供了漂亮的
UI组件库、强大的JS APi以及基于调用原生的的Native APi,可以让我们快速开发跨平台的混合APP以及移动web页面。（推荐*） - 缺点：
angularreactvue开发的移动端应用要打包成app的时候得重新再学习ionic
这个取舍写得挺实在。Ionic 给你的是一整套东西，UI 组件、导航、原生封装全包了，从零起一个 App 确实快。但代价是绑定 Angular（Ionic 3 时代是硬绑定），你原来那个 Vue 项目一行都用不上。Ionic 3 的完整用法我另外整理了一篇 混合 App 之 Ionic3 小结篇，想走这条路可以对着看。
# 2.2 Cordova 这条路
cordova: 可以把html css js写的代码打包成app，还可以让js调用原生的api。cordova非常成熟、插件也非常多、扩展性也强，10年的历史
Cordova 的定位比 Ionic 低一层，它不管你 UI 怎么写、路由怎么跳，只干两件事：把 Web 产物包成安装包，以及提供插件机制让 JS 能调原生。所以它跟框架无关，这正是它适合「已有项目要上架」这个场景的原因。
打包App有几个方案
ionicreactNativeweexfluttercordova+vuecordova+reactcordova+angular
这几个里，React Native 和 Flutter 是另一个路子，UI 走原生渲染，性能上限高，但要重写。Cordova 系的方案 UI 还是跑在 WebView 里，性能天花板受 WebView 限制，长列表和复杂动画会明显吃亏。选哪个说到底看你的 App 是「内容展示为主」还是「重交互」，前者用 Cordova 完全够，后者别硬上。
# 三、Android 环境搭建
搭 Android 环境要装四样东西：
- 安装jdk 、配置jdk
- 安装android studio
- 安装nodejs
- 安装cordova
前三样各自去官网装就行，没什么讲究，JDK 记得配 JAVA_HOME 环境变量。Cordova 走 npm：
## 淘宝源安装
npm install -g cordova --registry=https://registry.npm.taobao.org
cnpm install -g cordova
这两条是当年国内下载慢的应对办法，现在 npm 镜像地址已经换成 https://registry.npmmirror.com 了，taobao.org 那个域名早就停了，照抄会连不上。cnpm 我个人不推荐用来装这种全局 CLI，它做的是软链接式的安装，遇到需要读取自身目录结构的工具容易出怪问题，直接用 npm 配镜像更稳。
创建项目 cordova create 项目名称
cordova create 项目名com.公司名.项目名 类名（建议）
cordova create cordovademo02 com.baidu.cordova Cordovademo
三个参数分别是：本地目录名、应用包名、应用显示名。中间那个包名是重点。
创建项目的时候注意包名称：发布上线打包的时候用到包名称，注意
这句必须重视。包名（Android 那边叫 applicationId，iOS 那边叫 Bundle Identifier）是应用在商店里的唯一身份，上架之后就再也改不了了，改了等于是一个全新的应用，老用户不会收到更新。所以别图省事用 com.example.demo 一路跑到底，创建那一刻就填成正式的。
修改应用包名名称：
- 修改
config.xml里面的包名称 - 修改完成以后重新执行
cordova platform add android
如果一开始填错了，改法在 config.xml 根节点的 id 属性上。
改完这里还没完，必须把平台删掉重加。原因是 platforms/android 下的原生工程是根据 config.xml 生成出来的，包名会被写进 AndroidManifest.xml、build.gradle 和一堆 Java 包目录里，光改 config.xml 不重新生成，编出来的还是老包名。这个我踩过，改完直接 build，装到手机上发现新旧两个 App 并存，才反应过来。
cd 到项目里面
cd cordovademo02
- 把
android的平台添加到项目里面cordova platform add android - 把项目导入到
android studio进行运行调试 （或者运行cordova run android）
导入的时候选 platforms 下的 android 目录，不是项目根目录。
这里得建立一个认知：platforms/ 目录是生成物，不是源码。你在 Android Studio 里直接改里面的文件，下次 cordova platform rm/add 或者某些 prepare 操作会把改动冲掉。真需要改原生配置，正确的位置是 config.xml 或者写 hooks 脚本。
# 四、导入 Android Studio 可能遇到的报错
这一节是当年花时间最多的地方。Cordova 生成的 Android 工程用的 Gradle 版本通常偏老，跟你本机装的 Android Studio 未必对得上，加上依赖要从境外仓库拉，各种报错就都来了。
1. 导入后提示 Android Studio Error:Connection timed out: connect
这是最典型的一个，Gradle 要去 services.gradle.org 下载 wrapper、去 jcenter / maven 拉依赖，网络不通就卡在这。
解决方案参考：https://blog.csdn.net/u013020000/article/details/73159754
思路有两条：给 Gradle 配代理（gradle.properties 里写 systemProp.http.proxyHost 那几项），或者把 gradle-x.x-all.zip 手动下下来放到本地，再把 distributionUrl 改成本地路径。后一条更彻底，因为它连带解决了每次换项目都重新下一遍 wrapper 的问题。国内环境还有第三条路，把 build.gradle 里的仓库地址换成阿里云的 maven 镜像，依赖拉取速度会有质的变化。
2. 遇到错误 failed to find with hash string 'android-26'
解决方案点击 图上蓝色链接进行安装
这个报错友好得多，意思是工程要的 compileSdkVersion 是 26，而你本机 SDK Manager 里没装这个版本。报错信息里那条蓝色链接点下去 Android Studio 会自动帮你装，装完重新同步就好。
3. Gradle build 没有反应
解决方案 ：点击
build见图箭头。如果有下载内容 耐心等待 （30分钟-2小时）
「耐心等待 30 分钟到 2 小时」这句是实话，第一次 Gradle 同步要下的东西是真多。判断它到底是在下载还是卡死了，看 Android Studio 底部状态栏有没有进度条在动，或者去 ~/.gradle/caches 看目录大小是不是还在涨。都不动的话基本就是网络断了，回去看第 1 条。
4. 提示 please configure Android SDK
解决方案：点击蓝色
configure，然后选择对应的sdk （前提是sdk已经安装）
这条是工程没关联上 SDK 路径。点 configure 指过去就行，前提是 SDK 确实装了。顺手把 ANDROID_HOME（新版叫 ANDROID_SDK_ROOT）环境变量也配上，因为 cordova run android 走的是命令行，它读的是环境变量，不看 Android Studio 的设置。
5. 真机调试时手机连上没有反应
- 关闭或者卸载自己电脑上面的360手机助手或者其他连手机的软件
- 安装你手机对应的
sdk
建议
android 5-到android8sdk都安装 （安装sdk ： Tools->SDK Manager）
那些手机助手会抢占 adb 端口，还会自己启一个版本不同的 adb 进程，两边打架的结果就是设备列表永远是空的。先把它们全关掉，然后跑一次 adb kill-server && adb devices 重启服务，多数情况就恢复了。
- 点击右上角对应箭头按钮配置
查看当前连接上的手机
- 手机必须开启调试模式（百度搜 xxx手机开启调试模式）
- 手机拔下来重启
android studio，重新插入手机重试 - 百度搜（
android studio连不上手机…）
