使用Cordova将Vue项目打包为Android APK完整教程

Question

前言

因工作需要，将 Vue 项目打包成 APK 文件，通常有几种方法可供选择，例如使用 apiClound、HBuilder 或者结合 Cordova。本文将详细介绍第三种方案，即通过 Vue 与 Cordova 配合，完成 Android APK 的打包流程。

首先，需要全局安装 Cordova。打开命令行工具，执行以下命令：

npm install -g cordova

安装完成后，创建一个新的 Cordova 项目。例如，运行：

cordova create cordova-app com.ysh mapp

其中，cordova-app 是项目目录名，com.ysh 是应用标识，mapp 是应用名称。接着，添加 Android 平台支持：

cordova platform add android

接下来，将你的 Vue 项目构建后生成的 dist 目录中的所有文件，全部复制到 Cordova 项目的 www 目录下，替换原有内容。

在打包 Android APK 之前，必须配置好相关的环境变量，否则可能会遇到如 “Failed to find 'ANDROID_HOME' environment variable” 等错误。

配置 JDK：
- 下载并安装 JDK。
- 设置系统环境变量 JAVA_HOME，指向 JDK 的安装路径。
- 在 Path 变量中添加 %JAVA_HOME%\bin。
- 验证配置：打开命令行，输入 java -version，应显示版本信息。
配置 Android SDK：
- 下载 Android SDK 并解压。
- 设置环境变量 ANDROID_HOME，指向 SDK 的根目录。
- 在 Path 中添加 %ANDROID_HOME%\platform-tools。
- 重启命令行后，输入 adb 命令验证是否配置成功。
安装 Gradle：
- 参考官方教程安装 Gradle，确保版本兼容。

假设上述环境均已配置完成，进入 Cordova 项目目录，进行以下操作：

如果需要重新配置 Android 平台，可以先移除后添加：

cordova platform remove android
cordova platform add android

然后，运行打包命令生成 release 版本的 APK：

cordova build android --release

首次执行此命令可能会较慢，需要等待 2 到 8 分钟。打包成功后，APK 文件会生成在 platforms/android/app/build/outputs/apk/release/ 目录下，但此时 APK 尚未签名，无法直接安装到设备。

生成密钥库：
在任意目录（例如 D 盘根目录）打开命令行，执行：
```
keytool -genkey -v -keystore D:\mytest.keystore -alias mytest -keyalg RSA -validity 20000
```
按照提示设置密钥库口令和相关信息。其中，-keystore 指定密钥库路径，-alias 为别名，-validity 设置有效期天数。
处理密钥库格式问题：
如果遇到密钥库格式警告，可以运行以下命令转换格式：
```
keytool -importkeystore -srckeystore D:\mytest.keystore -destkeystore D:\mytest.keystore -deststoretype pkcs12
```
输入之前设置的口令即可。
签名 APK：
将生成的 mytest.keystore 文件复制到 APK 所在目录。在该目录打开命令行，执行签名命令：
```
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore mytest.keystore app-release-unsigned.apk mytest
```
输入密钥库口令，完成签名。

签名后的 APK 可以安装到 Android 模拟器或真机进行测试。例如，使用雷电模拟器，将 APK 文件拖入模拟器即可安装运行。

通过以上步骤，即可成功将 Vue 项目打包并签名，生成可在 Android 设备上安装的 APK 文件。