vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue项目转换为Android App

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

作者：doublez234

这篇文章主要介绍了如何将Vue项目转换为Android应用,包括设置开发环境、打包Vue项目、安装和配置Capacitor,以及如何处理网络请求和配置图标,此外,还包括了如何编译生成APK文件和处理可能的错误,需要的朋友可以参考下

转为为 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
  1. 安装 Capacitor CLI 和核心库：
npm install @capacitor/core @capacitor/cli
  1. 初始化 Capacitor： 这个命令会在您的项目中创建 Capacitor 的配置文件。
npx cap init

它会问您几个问题：

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

添加 Android 平台

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

  1. 安装 Android 平台支持：
npm install @capacitor/android
  1. 添加 Android 平台到您的项目：
npx cap add android

执行此命令后，Capacitor 会：

在 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。

之后的开发流程就会变成

npm run build

npx cap sync android

网络请求修改

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

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

方法一

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

方法二

网络安全配置文件

<?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>

说明：

在 AndroidManifest.xml 中引用该配置

<?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://...) 发送请求，这被“安全屋”的规则所禁止。

{
//...
  "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
└── ... (其他尺寸的文件夹)

极简适配

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

编译为release版本的APK

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

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

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

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

  1. 在终端中，进入到 android/app 目录下：
cd android/app
  1. 运行 Java 的 keytool 命令来生成密钥库：
keytool -genkey -v -keystore my-app-release-key.keystore -alias my-app-alias -keyalg RSA -keysize 2048 -validity 10000
  1. 根据提示输入密码和相关信息。请务必牢记你设置的密钥库密码 (store password) 和密钥别名密码 (key password)。
  2. 立即备份！ 将生成的 .keystore 文件、密钥库密码、别名、别名密码进行备份
  3. 丢失=完蛋！ 如果此文件或密码丢失，你将永远无法再生成使用相同签名的 APK 来更新已安装的应用。
  4. 切勿上传！ 不要将 .keystore 文件提交到 Git 等代码版本控制系统中。

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

  1. 在 android 目录下 (注意是 android 目录，不是 android/app) 创建一个名为 keystore.properties 的文件。
  2. 在该文件中添加以下内容，并替换成你自己的信息：
storePassword=你的密钥库密码
keyAlias=你的密钥别名
keyPassword=你的密钥别名密码
storeFile=my-app-release-key.keystore

将密码文件添加到 .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))
}
  1. 在同一个文件中，找到 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
  1. 运行 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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文