Cordova打包Vue项目成APK——真机调试

Apache Cordova 是一个开源的移动应用开发框架，允许开发者使用 HTML、CSS 和 JavaScript 构建跨平台移动应用。它通过封装原生功能为 JavaScript API，使 Web 应用能够访问设备硬件，如摄像头、GPS 等。

核心功能

• 跨平台支持：一次开发，可部署到 iOS、Android、Windows 等平台。
• 插件系统：通过插件扩展原生功能，例如访问文件系统或推送通知。
• 基于 Web 技术：使用前端技术栈（HTML5、CSS、JS）开发，降低学习成本。

安装与配置

首先，确保已安装 Node.js，然后通过 npm 全局安装 Cordova：

npm install -g cordova
cordova -version  # 查看版本

打包APK步骤

1. 新建Cordova项目

cordova create CordovaDemo
cd CordovaDemo

2. 添加Android平台

生成Android平台的Cordova库：

cordova platform add android

执行后，platforms 文件夹中会生成 android 文件夹。

3. Vue项目打包

在 Vue 项目中，需要先将 vue.config.js 中的 publicPath 属性改为 "./"，然后打包：

npm run build

打包完成后，将生成的静态文件（通常位于 dist 或 www 目录）复制到 Cordova 项目的 www 文件夹中，覆盖重复文件。

4. 环境检查与配置

运行以下命令检查环境是否齐全：

cordova requirements

如果出现错误，常见问题及解决如下：

Java JDK

确保已安装 JDK 并配置环境变量。推荐使用 JDK 8 或更高版本。

Android SDK

若未安装 Android SDK，需下载并配置。步骤如下：

1. 下载 Android Command Line Tools，解压到目录如 C:\Android\cmdline-tools\latest\bin。
2. 以管理员身份打开 PowerShell 或 CMD，临时添加 PATH：

   $env:PATH = "$env:PATH;C:\Android\cmdline-tools\latest\bin"
   

3. 安装平台工具和构建工具：

   sdkmanager "platform-tools" "platforms;android-29" "build-tools;29.0.3"
   

4. 配置环境变量：
   • 设置 ANDROID_HOME 为 C:\Android。
   • 在 Path 中添加 %ANDROID_HOME%\cmdline-tools\latest\bin、%ANDROID_HOME%\platform-tools 和 %ANDROID_HOME%\build-tools\29.0.3。

验证配置：

adb version
sdkmanager --list

Gradle

Cordova 9+ 需要手动安装 Gradle。推荐使用 Gradle 8.4（兼容 Cordova 10/11）：

1. 下载 Gradle 并解压到如 C:\Gradle。
2. 将 C:\Gradle\bin 添加到系统 Path。
3. 验证安装：

   gradle -v
   

解决平台镜像缺失

如果 cordova requirements 提示 Android target 未安装，安装对应平台镜像：

sdkmanager "platforms;android-35"

然后重新添加 Android 平台：

cd CordovaDemo
cordova platform add android@latest

5. 构建APK

在手机端开启 USB 调试模式后，运行以下命令构建并安装 APK 到设备：

cordova run android        # release版本
cordova run android --debug # debug版本

首次构建可能较慢，需下载依赖。若遇到网络问题导致依赖下载失败，可配置国内镜像仓库。在 Cordova 项目的 platforms/android/repositories.gradle 文件中，替换为以下内容：

// 国内镜像仓库合集
def repos = {
    maven { url 'https://maven.aliyun.com/repository/public' }
    maven { url 'https://maven.aliyun.com/repository/google' }
    maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
    maven { url 'https://mirrors.cloud.tencent.com/nexus/repository/maven-public/' }
    maven { url 'https://mirrors.cloud.tencent.com/nexus/repository/google/' }
    maven { url 'https://repo.huaweicloud.com/repository/maven/' }
    mavenLocal()
    mavenCentral()
    google()
    gradlePluginPortal()
}

ext.repos = repos

补充知识

Android SDK

Android SDK 是谷歌提供的开发工具集合，包含开发、测试和调试 Android 应用所需的库、工具和文档。核心组件包括 Android Studio、SDK Tools、Platform Tools、Build Tools 和 Android 平台版本。

Gradle

Gradle 是一个开源的构建自动化工具，主要用于 Java 和 Kotlin 项目。它支持依赖管理、多项目构建和增量编译，提高构建效率。与 Maven 相比，Gradle 更灵活且性能更优。

通过以上步骤，您可以成功使用 Cordova 将 Vue 项目打包成 APK，并进行真机调试。