轉(zhuǎn)為為 Android App

準(zhǔn)備工作

1. 確保開發(fā)環(huán)境已就緒：
   • 安裝 Node.js
   • 安裝 Android Studio 并確保已安裝好 Android SDK 和命令行工具。
   • 有一個(gè)已經(jīng)完成的 Vue 項(xiàng)目。
2. 打包您的 Vue 項(xiàng)目： 在您的 Vue 項(xiàng)目根目錄下，首先生成生產(chǎn)環(huán)境的靜態(tài)文件。這些文件（HTML, CSS, JS）是最終要被打包進(jìn) App 的內(nèi)容。

npm run build

執(zhí)行后，通常會(huì)生成一個(gè) dist 文件夾。

安裝和初始化 Capacitor

1. 進(jìn)入項(xiàng)目目錄：

cd your-vue-project

2. 安裝 Capacitor CLI 和核心庫(kù)：

npm install @capacitor/core @capacitor/cli

3. 初始化 Capacitor： 這個(gè)命令會(huì)在您的項(xiàng)目中創(chuàng)建 Capacitor 的配置文件。

npx cap init

它會(huì)問(wèn)您幾個(gè)問(wèn)題：

• App Name?: 您的應(yīng)用名稱（例如：My Vue App）。
• App ID?: 您的應(yīng)用包名，這是應(yīng)用的唯一標(biāo)識(shí)，通常采用反向域名格式（例如：com.company.myapp）。
• Web asset directory: 它會(huì)讓你確認(rèn) web 靜態(tài)資源目錄。對(duì)于標(biāo)準(zhǔn)的 Vue CLI 項(xiàng)目，這個(gè)目錄就是 dist。直接回車確認(rèn)即可。

完成后，會(huì)生成一個(gè) capacitor.config.json 文件。

添加 Android 平臺(tái)

這是最關(guān)鍵的一步，它會(huì)創(chuàng)建您需要的 Android Studio 項(xiàng)目。

1. 安裝 Android 平臺(tái)支持：

npm install @capacitor/android

2. 添加 Android 平臺(tái)到您的項(xiàng)目：

npx cap add android

執(zhí)行此命令后，Capacitor 會(huì)：

• 在您的項(xiàng)目根目錄下創(chuàng)建一個(gè) android/ 文件夾。
• 這個(gè) android/ 文件夾就是一個(gè)完整的、標(biāo)準(zhǔn)的 Android Studio 項(xiàng)目！
• 它會(huì)自動(dòng)將您之前 build 好的 dist 目錄下的所有文件復(fù)制到 Android 項(xiàng)目的 assets 目錄中。

在 Android Studio 中打開并構(gòu)建 APK

1. 打開 Android Studio 項(xiàng)目： 您可以直接運(yùn)行以下命令，它會(huì)自動(dòng)調(diào)用 Android Studio 打開項(xiàng)目：

npx cap open android

或者，您也可以手動(dòng)打開 Android Studio，然后選擇 “Open”，并導(dǎo)航到您項(xiàng)目中的 android 文件夾，點(diǎn)擊打開。

1. 等待 Gradle 同步： 首次打開時(shí)，Android Studio 會(huì)需要一些時(shí)間來(lái)下載依賴和同步項(xiàng)目（Gradle Sync）。請(qǐng)耐心等待右下角的進(jìn)度條完成。
2. 構(gòu)建 APK：
   • 等待 Gradle 同步完成后，菜單欄會(huì)變?yōu)榭刹僮鳡顟B(tài)。
   • 點(diǎn)擊菜單欄的 Build -> Build Bundle(s) / APK(s) -> Build APK(s)。
   • 構(gòu)建成功后，Android Studio 右下角會(huì)彈出提示，您可以點(diǎn)擊 “locate” 鏈接直接找到生成的 APK 文件。它通常位于 android/app/build/outputs/apk/debug/app-debug.apk。

之后的開發(fā)流程就會(huì)變成

• 在 Vue 項(xiàng)目中修改代碼 (src/ 目錄下)。
• 重新打包您的 Vue 應(yīng)用：

npm run build

• 將最新的 web 文件同步到 Android 項(xiàng)目中：

npx cap sync android

• 這個(gè)命令會(huì)自動(dòng)將 dist 目錄的最新內(nèi)容復(fù)制到 Android 項(xiàng)目中。
• 回到已經(jīng)打開的 Android Studio，直接點(diǎn)擊 “Run” (綠色三角按鈕) 或重新 “Build APK”，新的代碼就會(huì)生效。

網(wǎng)絡(luò)請(qǐng)求修改

如果使用的是http請(qǐng)求的話需要進(jìn)行修改

從 Android 9 (API 級(jí)別 28) 開始，Google 為了安全，默認(rèn)禁止應(yīng)用使用未加密的 HTTP (http://) 請(qǐng)求。而 Vue 應(yīng)用在瀏覽器中運(yùn)行時(shí)，沒(méi)有這個(gè)限制。當(dāng)它被打包進(jìn) APK 后，就必須遵守安卓系統(tǒng)的這條安全規(guī)則。

方法一

云端服務(wù)器配置 SSL 證書，啟用https，那么app就不需要任何修改

方法二

網(wǎng)絡(luò)安全配置文件

• 在 Android Studio 中打開你的項(xiàng)目 就是之前生成的那個(gè) android 文件夾。
• 創(chuàng)建網(wǎng)絡(luò)安全配置文件
  • 在左側(cè)項(xiàng)目結(jié)構(gòu)中，導(dǎo)航到 app -> src -> main -> res。
  • 右鍵點(diǎn)擊 res 文件夾，選擇 New -> Directory，創(chuàng)建一個(gè)名為 xml 的文件夾。
  • 右鍵點(diǎn)擊新建的 xml 文件夾，選擇 New -> XML resource file。
  • 文件名輸入 network_security_config，然后點(diǎn)擊 OK。
• 編輯 network_security_config.xml 文件 將以下內(nèi)容粘貼進(jìn)去。這會(huì)告訴系統(tǒng)，對(duì)于你的 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>

說(shuō)明：

• <base-config cleartextTrafficPermitted="true"> 是一種“一刀切”的方法，允許 App 訪問(wèn)所有 HTTP 地址。在開發(fā)階段這很方便。
• <domain-config> 的方式更安全，它只為你指定的域名（例如 your-api-domain.com）開啟 HTTP 權(quán)限。發(fā)布應(yīng)用時(shí)建議用這種。

在 AndroidManifest.xml 中引用該配置

• 導(dǎo)航到 app -> src -> main -> AndroidManifest.xml。
• 在 <application> 標(biāo)簽中，添加 android:networkSecurityConfig 屬性，指向你剛剛創(chuàng)建的文件。

<?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網(wǎng)絡(luò)規(guī)則修改

為了提供更安全的環(huán)境和規(guī)避一些跨域問(wèn)題，Capacitor 在安卓應(yīng)用內(nèi)部默認(rèn)會(huì)啟用一個(gè)本地的 https:// 服務(wù)來(lái)加載您的 Vue 應(yīng)用。

現(xiàn)在的情況變成App 外殼 (https://localhost) 是一個(gè)“安全屋”，而這個(gè)安全屋里的代碼（您的 JS）試圖向屋外一個(gè)不安全的地址 (http://...) 發(fā)送請(qǐng)求，這被“安全屋”的規(guī)則所禁止。

• 打開項(xiàng)目根目錄下的 capacitor.config.json 文件（vue項(xiàng)目的根目錄）。
• 在 server 配置項(xiàng)中，明確指定 scheme 為 http。
• 如果您的 capacitor.config.json 文件里沒(méi)有 server 對(duì)象，就加上它。如果已經(jīng)有了，就修改或添加 scheme 屬性。

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

注意：Capacitor 5 及更高版本推薦使用 androidScheme。對(duì)于舊版本，可能是 "scheme": "http"。androidScheme 的優(yōu)先級(jí)更高。您可以直接使用 androidScheme: "http"。

檢查后端的 CORS 跨域配置

App 的來(lái)源是 http://localhost，如果后端沒(méi)有開啟這個(gè)規(guī)則，那么就會(huì)變成一個(gè)典型的跨域請(qǐng)求拒絕，所以后端服務(wù)器必須明確允許來(lái)自 http://localhost 的請(qǐng)求。

配置圖標(biāo)

正確適配

在瀏覽器里搜索類似Android Asset Studio的在線網(wǎng)站，傳你最高清的那個(gè)圖標(biāo)文件，網(wǎng)站會(huì)自動(dòng)幫你生成一個(gè) .zip 壓縮包，里面包含了所有尺寸的圖標(biāo)，并且文件夾結(jié)構(gòu)都給你建好了。

解壓剛才下載的 .zip 文件。你會(huì)看到類似下面這樣的文件夾結(jié)構(gòu)：

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

• 打開你項(xiàng)目的 android/app/src/main/res/ 目錄。
• 將解壓出來(lái)的所有 mipmap-* 文件夾完整地復(fù)制并覆蓋到 android/app/src/main/res/ 目錄下。

極簡(jiǎn)適配

只準(zhǔn)備你需要的圖片把文件復(fù)制兩份，這兩個(gè)文件重命名為安卓系統(tǒng)的標(biāo)準(zhǔn)名字：

• ic_launcher.png
• ic_launcher_round.png (安卓系統(tǒng)需要一個(gè)圓形的版本，我們直接用方形的代替，系統(tǒng)會(huì)自動(dòng)裁剪)
• 進(jìn)入你的項(xiàng)目目錄 android/app/src/main/res/。
• 你會(huì)看到很多 mipmap- 開頭的文件夾（比如 mipmap-mdpi, mipmap-hdpi 等）。
• 把所有這些 mipmap- 文件夾里面默認(rèn)的 ic_launcher.png 和 ic_launcher_round.png 文件全部刪掉！ 這一步很重要，確保舊的圖標(biāo)不會(huì)再出現(xiàn)。
• 然后，只選擇一個(gè)分辨率最高的文件夾，比如 mipmap-xxxhdpi。
• 把你準(zhǔn)備好的 ic_launcher.png 和 ic_launcher_round.png 這兩個(gè)文件，只放進(jìn) mipmap-xxxhdpi 這一個(gè)文件夾里。
• 重新編譯你的APK即可。

編譯為release版本的APK

按照之前的把vue代碼全部同步過(guò)來(lái)之后執(zhí)行下面的內(nèi)容進(jìn)行release版本

創(chuàng)建并配置簽名密鑰 (最核心的步驟)

這是區(qū)分 debug 包和 release 包的關(guān)鍵。這個(gè)過(guò)程只需要為你的應(yīng)用做一次，請(qǐng)務(wù)必妥善保管生成的密鑰文件和密碼。

生成簽名密鑰庫(kù) (.keystore 文件)

1. 在終端中，進(jìn)入到 android/app 目錄下：

cd android/app

2. 運(yùn)行 Java 的 keytool 命令來(lái)生成密鑰庫(kù)：

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

• my-app-release-key.keystore: 你的密鑰庫(kù)文件名，可以自定義。
• my-app-alias: 密鑰的別名，也可以自定義。

3. 根據(jù)提示輸入密碼和相關(guān)信息。請(qǐng)務(wù)必牢記你設(shè)置的密鑰庫(kù)密碼 (store password) 和密鑰別名密碼 (key password)。
4. 立即備份！ 將生成的 .keystore 文件、密鑰庫(kù)密碼、別名、別名密碼進(jìn)行備份
5. 丟失=完蛋！ 如果此文件或密碼丟失，你將永遠(yuǎn)無(wú)法再生成使用相同簽名的 APK 來(lái)更新已安裝的應(yīng)用。
6. 切勿上傳！ 不要將 .keystore 文件提交到 Git 等代碼版本控制系統(tǒng)中。

創(chuàng)建密碼屬性文件 (keystore.properties)

1. 在 android 目錄下 (注意是 android 目錄，不是 android/app) 創(chuàng)建一個(gè)名為 keystore.properties 的文件。
2. 在該文件中添加以下內(nèi)容，并替換成你自己的信息：

storePassword=你的密鑰庫(kù)密碼
keyAlias=你的密鑰別名
keyPassword=你的密鑰別名密碼
storeFile=my-app-release-key.keystore

• storeFile 指向的是你剛剛在 android/app 目錄下生成的密鑰庫(kù)文件。

將密碼文件添加到 .gitignore

為了防止將密碼提交到代碼庫(kù)，請(qǐng)確保項(xiàng)目根目錄下的 .gitignore 文件中包含了這一行：

/android/keystore.properties

配置 build.gradle 文件

現(xiàn)在，讓 Android 的構(gòu)建系統(tǒng)（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. 在同一個(gè)文件中，找到 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
		}
	}
	// ...
}

構(gòu)建最終的 Release APK

所有配置都已完成，現(xiàn)在可以生成最終的 APK 文件了。

1. 確保你的終端當(dāng)前在 android 目錄下。如果不在，請(qǐng)切換：

cd android 

2. 運(yùn)行 Gradle 的 assembleRelease 任務(wù)：

# 在 macOS 或 Linux 上
./gradlew assembleRelease

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

可能遇到的報(bào)錯(cuò)

What went wrong: Execution failed for task ':capacitor-android:compileReleaseJavaWithJacac'. > 錯(cuò)誤: 無(wú)效的源發(fā)行版：21

如果使用的JDK是17，那么需要先下載JDK21，然后再setting里面添加，再次進(jìn)行編譯，如果還是報(bào)錯(cuò)，可以重啟電腦來(lái)進(jìn)行解決！??！

以上就是使用Capacitor將Vue項(xiàng)目轉(zhuǎn)換為Android App的操作步驟的詳細(xì)內(nèi)容，更多關(guān)于Vue項(xiàng)目轉(zhuǎn)換為Android App的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論