使用Capacitor将Vue项目转换为Android App的操作步骤

转为为 Android App

准备工作

1. 确保开发环境已就绪：
   • 安装 Node.js
   • 安装 Android Studio 并确保已安装好 Android SDK 和命令行工具。
   • 有一个已经完成的 Vue 项目。
2. 打包您的 Vue 项目： 在您的 Vue 项目根目录下，首先生成生产环境的静态文件。这些文件（HTML, CSS, JS）是最终要被打包进 App 的内容。

npm run build

执行后，通常会生成一个 dist 文件夹。

安装和初始化 Capacitor

1. 进入项目目录：

cd your-vue-project

2. 安装 Capacitor CLI 和核心库：

npm install @capacitor/core @capacitor/cli

3. 初始化 Capacitor： 这个命令会在您的项目中创建 Capacitor 的配置文件。

npx cap init

它会问您几个问题：

• App Name?: 您的应用名称（例如：My Vue App）。
• App ID?: 您的应用包名，这是应用的唯一标识，通常采用反向域名格式（例如：com.company.myapp）。
• Web asset directory: 它会让你确认 web 静态资源目录。对于标准的 Vue CLI 项目，这个目录就是 dist。直接回车确认即可。

完成后，会生成一个 capacitor.config.json 文件。

添加 Android 平台

这是最关键的一步，它会创建您需要的 Android Studio 项目。

1. 安装 Android 平台支持：

npm install @capacitor/android

2. 添加 Android 平台到您的项目：

npx cap add android

执行此命令后，Capacitor 会：

• 在您的项目根目录下创建一个 android/ 文件夹。
• 这个 android/ 文件夹就是一个完整的、标准的 Android Studio 项目！
• 它会自动将您之前 build 好的 dist 目录下的所有文件复制到 Android 项目的 assets 目录中。

在 Android Studio 中打开并构建 APK

1. 打开 Android Studio 项目： 您可以直接运行以下命令，它会自动调用 Android Studio 打开项目：

npx cap open android

或者，您也可以手动打开 Android Studio，然后选择 “Open”，并导航到您项目中的 android 文件夹，点击打开。

1. 等待 Gradle 同步： 首次打开时，Android Studio 会需要一些时间来下载依赖和同步项目（Gradle Sync）。请耐心等待右下角的进度条完成。
2. 构建 APK：
   • 等待 Gradle 同步完成后，菜单栏会变为可操作状态。
   • 点击菜单栏的 Build -> Build Bundle(s) / APK(s) -> Build APK(s)。
   • 构建成功后，Android Studio 右下角会弹出提示，您可以点击 “locate” 链接直接找到生成的 APK 文件。它通常位于 android/app/build/outputs/apk/debug/app-debug.apk。

之后的开发流程就会变成

• 在 Vue 项目中修改代码 (src/ 目录下)。
• 重新打包您的 Vue 应用：

npm run build

• 将最新的 web 文件同步到 Android 项目中：

npx cap sync android

• 这个命令会自动将 dist 目录的最新内容复制到 Android 项目中。
• 回到已经打开的 Android Studio，直接点击 “Run” (绿色三角按钮) 或重新 “Build APK”，新的代码就会生效。

网络请求修改

如果使用的是http请求的话需要进行修改

从 Android 9 (API 级别 28) 开始，Google 为了安全，默认禁止应用使用未加密的 HTTP (http://) 请求。而 Vue 应用在浏览器中运行时，没有这个限制。当它被打包进 APK 后，就必须遵守安卓系统的这条安全规则。

方法一

云端服务器配置 SSL 证书，启用https，那么app就不需要任何修改

方法二

网络安全配置文件

• 在 Android Studio 中打开你的项目 就是之前生成的那个 android 文件夹。
• 创建网络安全配置文件
  • 在左侧项目结构中，导航到 app -> src -> main -> res。
  • 右键点击 res 文件夹，选择 New -> Directory，创建一个名为 xml 的文件夹。
  • 右键点击新建的 xml 文件夹，选择 New -> XML resource file。
  • 文件名输入 network_security_config，然后点击 OK。
• 编辑 network_security_config.xml 文件 将以下内容粘贴进去。这会告诉系统，对于你的 API 域名，允许使用 HTTP。

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
	<base-config cleartextTrafficPermitted="true">
		<trust-anchors>
			<certificates src="system" />
		</trust-anchors>
	</base-config>

	</network-security-config>

说明：

• <base-config cleartextTrafficPermitted="true"> 是一种“一刀切”的方法，允许 App 访问所有 HTTP 地址。在开发阶段这很方便。
• <domain-config> 的方式更安全，它只为你指定的域名（例如 your-api-domain.com）开启 HTTP 权限。发布应用时建议用这种。

在 AndroidManifest.xml 中引用该配置

• 导航到 app -> src -> main -> AndroidManifest.xml。
• 在 <application> 标签中，添加 android:networkSecurityConfig 属性，指向你刚刚创建的文件。

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
	<application
		...
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:networkSecurityConfig="@xml/network_security_config"  android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		...
	</application>
</manifest>

Capacitor网络规则修改

为了提供更安全的环境和规避一些跨域问题，Capacitor 在安卓应用内部默认会启用一个本地的 https:// 服务来加载您的 Vue 应用。

现在的情况变成App 外壳 (https://localhost) 是一个“安全屋”，而这个安全屋里的代码（您的 JS）试图向屋外一个不安全的地址 (http://...) 发送请求，这被“安全屋”的规则所禁止。

• 打开项目根目录下的 capacitor.config.json 文件（vue项目的根目录）。
• 在 server 配置项中，明确指定 scheme 为 http。
• 如果您的 capacitor.config.json 文件里没有 server 对象，就加上它。如果已经有了，就修改或添加 scheme 属性。

{
//...
  "server": {
	"androidScheme": "http", 
	"allowNavigation": []
  }
//...
}

注意：Capacitor 5 及更高版本推荐使用 androidScheme。对于旧版本，可能是 "scheme": "http"。androidScheme 的优先级更高。您可以直接使用 androidScheme: "http"。

检查后端的 CORS 跨域配置

App 的来源是 http://localhost，如果后端没有开启这个规则，那么就会变成一个典型的跨域请求拒绝，所以后端服务器必须明确允许来自 http://localhost 的请求。

配置图标

正确适配

在浏览器里搜索类似Android Asset Studio的在线网站，传你最高清的那个图标文件，网站会自动帮你生成一个 .zip 压缩包，里面包含了所有尺寸的图标，并且文件夹结构都给你建好了。

解压刚才下载的 .zip 文件。你会看到类似下面这样的文件夹结构：

res/
├── mipmap-mdpi/
│   ├── ic_launcher.png
│   └── ic_launcher_round.png
├── mipmap-hdpi/
│   ├── ic_launcher.png
│   └── ic_launcher_round.png
└── ... (其他尺寸的文件夹)

• 打开你项目的 android/app/src/main/res/ 目录。
• 将解压出来的所有 mipmap-* 文件夹完整地复制并覆盖到 android/app/src/main/res/ 目录下。

极简适配

只准备你需要的图片把文件复制两份，这两个文件重命名为安卓系统的标准名字：

• ic_launcher.png
• ic_launcher_round.png (安卓系统需要一个圆形的版本，我们直接用方形的代替，系统会自动裁剪)
• 进入你的项目目录 android/app/src/main/res/。
• 你会看到很多 mipmap- 开头的文件夹（比如 mipmap-mdpi, mipmap-hdpi 等）。
• 把所有这些 mipmap- 文件夹里面默认的 ic_launcher.png 和 ic_launcher_round.png 文件全部删掉！ 这一步很重要，确保旧的图标不会再出现。
• 然后，只选择一个分辨率最高的文件夹，比如 mipmap-xxxhdpi。
• 把你准备好的 ic_launcher.png 和 ic_launcher_round.png 这两个文件，只放进 mipmap-xxxhdpi 这一个文件夹里。
• 重新编译你的APK即可。

编译为release版本的APK

按照之前的把vue代码全部同步过来之后执行下面的内容进行release版本

创建并配置签名密钥 (最核心的步骤)

这是区分 debug 包和 release 包的关键。这个过程只需要为你的应用做一次，请务必妥善保管生成的密钥文件和密码。

生成签名密钥库 (.keystore 文件)

1. 在终端中，进入到 android/app 目录下：

cd android/app

2. 运行 Java 的 keytool 命令来生成密钥库：

keytool -genkey -v -keystore my-app-release-key.keystore -alias my-app-alias -keyalg RSA -keysize 2048 -validity 10000

• my-app-release-key.keystore: 你的密钥库文件名，可以自定义。
• my-app-alias: 密钥的别名，也可以自定义。

3. 根据提示输入密码和相关信息。请务必牢记你设置的密钥库密码 (store password) 和密钥别名密码 (key password)。
4. 立即备份！ 将生成的 .keystore 文件、密钥库密码、别名、别名密码进行备份
5. 丢失=完蛋！ 如果此文件或密码丢失，你将永远无法再生成使用相同签名的 APK 来更新已安装的应用。
6. 切勿上传！ 不要将 .keystore 文件提交到 Git 等代码版本控制系统中。

创建密码属性文件 (keystore.properties)

1. 在 android 目录下 (注意是 android 目录，不是 android/app) 创建一个名为 keystore.properties 的文件。
2. 在该文件中添加以下内容，并替换成你自己的信息：

storePassword=你的密钥库密码
keyAlias=你的密钥别名
keyPassword=你的密钥别名密码
storeFile=my-app-release-key.keystore

• storeFile 指向的是你刚刚在 android/app 目录下生成的密钥库文件。

将密码文件添加到 .gitignore

为了防止将密码提交到代码库，请确保项目根目录下的 .gitignore 文件中包含了这一行：

/android/keystore.properties

配置 build.gradle 文件

现在，让 Android 的构建系统（Gradle）知道如何使用你的密钥。

1. 打开 android/app/build.gradle 文件。
2. 在文件的最顶部，android { ... } 代码块之前，粘贴以下代码：

def keystorePropertiesFile = rootProject.file('keystore.properties')
def keystoreProperties = new Properties()
if (keystorePropertiesFile.exists()) {
	keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

3. 在同一个文件中，找到 android { ... } 代码块，在里面添加 signingConfigs 部分，并修改 buildTypes 的 release 部分，如下所示：

android {
	// ... 其他配置

	signingConfigs {
		release {
			if (keystorePropertiesFile.exists()) {
				storeFile file(keystoreProperties.storeFile)
				storePassword keystoreProperties.storePassword
				keyAlias keystoreProperties.keyAlias
				keyPassword keystoreProperties.keyPassword
			}
		}
	}

	buildTypes {
		release {
			// ... 其他 release 配置
			signingConfig signingConfigs.release
		}
	}
	// ...
}

构建最终的 Release APK

所有配置都已完成，现在可以生成最终的 APK 文件了。

1. 确保你的终端当前在 android 目录下。如果不在，请切换：

cd android 

2. 运行 Gradle 的 assembleRelease 任务：

# 在 macOS 或 Linux 上
./gradlew assembleRelease

# 在 Windows 的 CMD 或 PowerShell 上
gradlew.bat assembleRelease

可能遇到的报错

What went wrong: Execution failed for task ':capacitor-android:compileReleaseJavaWithJacac'. > 错误: 无效的源发行版：21

如果使用的JDK是17，那么需要先下载JDK21，然后再setting里面添加，再次进行编译，如果还是报错，可以重启电脑来进行解决！！！

以上就是使用Capacitor将Vue项目转换为Android App的操作步骤的详细内容，更多关于Vue项目转换为Android App的资料请关注脚本之家其它相关文章！

最新评论