Mac M1 环境下使用 Rust Tauri 将 Vue3 项目打包成 APK 完整指南

无法长大2026-01-29 9:44

## 前言

本文将详细介绍如何在 Mac M1 芯片环境下，使用 Tauri 框架将现有的 Vue3 项目打包成 Android APK 应用。Tauri 是一个轻量级的桌面和移动应用开发框架，相比 Electron 更加轻量，打包体积更小。

**环境说明：**

  • 操作系统：macOS (Apple Silicon M1)

  • 前端项目：Vue3（已完成开发，可正常 `npm run build`）

  • 目标平台：Android APK

## 一、环境准备

### 1.1 安装 Rust

Tauri 基于 Rust 开发，首先需要安装 Rust 环境。

```bash

使用官方安装脚本

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

安装完成后，配置环境变量

source $HOME/.cargo/env

验证安装

rustc --version

cargo --version

```

**注意：** 安装过程中选择默认安装选项即可（选项 1）。

### 1.2 安装 Node.js 和 npm

确保你的系统已安装 Node.js（建议 16.x 或更高版本）：

```bash

检查版本

node --version

npm --version

```

如果未安装，推荐使用 [nvm](https://github.com/nvm-sh/nvm) 或直接从 [Node.js 官网](https://nodejs.org/) 下载。

### 1.3 安装 Android 开发环境

#### 1.3.1 安装 Android Studio

  1. 访问 [Android Studio 官网](https://developer.android.com/studio) 下载 Mac 版本

  2. 安装 Android Studio

  3. 首次启动时，按照向导安装 Android SDK

#### 1.3.2 配置 Android SDK

打开 Android Studio，进入 `Preferences` → `Appearance & Behavior` → `System Settings` → `Android SDK`：

  • 安装 **Android SDK Platform** (建议 API 33 或更高)

  • 安装 **Android SDK Build-Tools**

  • 安装 **Android SDK Command-line Tools**

  • 安装 **Android SDK Platform-Tools**

  • 安装 **NDK (Side by side)** - 重要！

#### 1.3.3 配置环境变量

编辑 `~/.zshrc` 或 `~/.bash_profile`，添加以下内容：

```bash

Android SDK

export ANDROID_HOME=$HOME/Library/Android/sdk

export PATH=PATH:ANDROID_HOME/emulator

export PATH=PATH:ANDROID_HOME/platform-tools

export PATH=PATH:ANDROID_HOME/tools

export PATH=PATH:ANDROID_HOME/tools/bin

NDK

export NDK_HOME=$ANDROID_HOME/ndk/[你的NDK版本号]

```

**查找 NDK 版本号：**

```bash

ls $HOME/Library/Android/sdk/ndk/

```

配置完成后，重新加载配置：

```bash

source ~/.zshrc

```

验证配置：

```bash

echo $ANDROID_HOME

adb --version

```

### 1.4 安装 Java JDK

Android 构建需要 JDK 17：

```bash

使用 Homebrew 安装

brew install openjdk@17

配置环境变量（添加到 ~/.zshrc）

export JAVA_HOME=/opt/homebrew/opt/openjdk@17

export PATH=JAVA_HOME/bin:PATH

重新加载配置

source ~/.zshrc

验证安装

java -version

```

## 二、为 Vue3 项目集成 Tauri

### 2.1 进入 Vue3 项目目录

```bash

cd /path/to/your/vue3-project

```

2.2 安装 Tauri CLI

```bash

npm install -D @tauri-apps/cli

```

或使用 yarn：

```bash

yarn add -D @tauri-apps/cli

```

2.3 初始化 Tauri

```bash

npm run tauri init

```

初始化过程中会询问以下问题：

  1. **What is your app name?**
  • 输入你的应用名称，例如：`MyVue3App`
  1. **What should the window title be?**
  • 输入窗口标题，例如：`My Vue3 Application`
  1. **Where are your web assets located?**
  • 输入：`dist`（Vue3 构建输出目录）
  1. **What is the url of your dev server?**
  1. **What is your frontend dev command?**
  • 输入：`npm run dev`
  1. **What is your frontend build command?**
  • 输入：`npm run build`

初始化完成后，会在项目根目录生成 `src-tauri` 文件夹。

2.4 配置 Tauri

编辑 `src-tauri/tauri.conf.json`，确认以下配置：

```json

{

"build": {

"beforeDevCommand": "npm run dev",

"beforeBuildCommand": "npm run build",

"devPath": "http://localhost:5173",

"distDir": "../dist"

},

"package": {

"productName": "MyVue3App",

"version": "1.0.0"

},

"tauri": {

"bundle": {

"identifier": "com.yourcompany.myvue3app",

"icon": [

"icons/32x32.png",

"icons/128x128.png",

"icons/128x128@2x.png",

"icons/icon.icns",

"icons/icon.ico"

]

}

}

}

```

**重要：** `identifier` 必须是唯一的反向域名格式，例如 `com.example.myapp`。

## 三、配置 Android 支持

### 3.1 添加 Android 平台

```bash

npm run tauri android init

```

这个命令会：

  • 在 `src-tauri` 目录下创建 `gen/android` 文件夹

  • 生成 Android 项目结构

  • 配置 Gradle 构建文件

### 3.2 安装 Rust Android 目标

为 M1 芯片安装 Android 交叉编译目标：

```bash

rustup target add aarch64-linux-android

rustup target add armv7-linux-androideabi

rustup target add i686-linux-android

rustup target add x86_64-linux-android

```

### 3.3 配置 Cargo 交叉编译

创建或编辑 `~/.cargo/config.toml`：

```toml

target.aarch64-linux-android

ar = "[ANDROID_NDK_HOME]/toolchains/llvm/prebuilt/darwin-x86_64/bin/llvm-ar"

linker = "[ANDROID_NDK_HOME]/toolchains/llvm/prebuilt/darwin-x86_64/bin/aarch64-linux-android33-clang"

target.armv7-linux-androideabi

ar = "[ANDROID_NDK_HOME]/toolchains/llvm/prebuilt/darwin-x86_64/bin/llvm-ar"

linker = "[ANDROID_NDK_HOME]/toolchains/llvm/prebuilt/darwin-x86_64/bin/armv7a-linux-androideabi33-clang"

target.i686-linux-android

ar = "[ANDROID_NDK_HOME]/toolchains/llvm/prebuilt/darwin-x86_64/bin/llvm-ar"

linker = "[ANDROID_NDK_HOME]/toolchains/llvm/prebuilt/darwin-x86_64/bin/i686-linux-android33-clang"

target.x86_64-linux-android

ar = "[ANDROID_NDK_HOME]/toolchains/llvm/prebuilt/darwin-x86_64/bin/llvm-ar"

linker = "[ANDROID_NDK_HOME]/toolchains/llvm/prebuilt/darwin-x86_64/bin/x86_64-linux-android33-clang"

```

**注意：**

  • 将 `[ANDROID_NDK_HOME]` 替换为你的实际 NDK 路径

  • M1 Mac 使用的是 `darwin-x86_64` 预构建工具链（通过 Rosetta 2 运行）

  • API 级别 `33` 可根据需要调整

### 3.4 配置 Android 应用信息

编辑 `src-tauri/gen/android/app/src/main/AndroidManifest.xml`，根据需要添加权限：

```xml

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

```

编辑 `src-tauri/gen/android/app/build.gradle.kts`，配置应用信息：

```kotlin

android {

namespace = "com.yourcompany.myvue3app"

compileSdk = 33

defaultConfig {

applicationId = "com.yourcompany.myvue3app"

minSdk = 24

targetSdk = 33

versionCode = 1

versionName = "1.0.0"

}

}

```

## 四、构建 APK

### 4.1 开发模式测试

首先在开发模式下测试应用：

```bash

npm run tauri android dev

```

这会启动 Android 模拟器或连接的设备，并运行应用。

**如果没有模拟器：**

  1. 打开 Android Studio

  2. 点击 `Tools` → `Device Manager`

  3. 创建一个新的虚拟设备（推荐 Pixel 5 + API 33）

### 4.2 构建生产版本 APK

```bash

npm run tauri android build

```

构建过程包括：

  1. 执行 `npm run build` 构建 Vue3 项目

  2. 编译 Rust 代码为 Android 库

  3. 使用 Gradle 构建 APK

**构建选项：**

```bash

构建 debug 版本

npm run tauri android build -- --debug

构建 release 版本（需要签名）

npm run tauri android build -- --release

构建指定架构

npm run tauri android build -- --target aarch64

```

### 4.3 查找生成的 APK

构建完成后，APK 文件位于：

```

src-tauri/gen/android/app/build/outputs/apk/

├── debug/

│ └── app-debug.apk

└── release/

└── app-release-unsigned.apk

```

## 五、签名和发布

### 5.1 生成签名密钥

```bash

keytool -genkey -v -keystore my-release-key.keystore \

-alias my-key-alias \

-keyalg RSA \

-keysize 2048 \

-validity 10000

```

按提示输入密钥信息。

### 5.2 配置签名

编辑 `src-tauri/gen/android/app/build.gradle.kts`：

```kotlin

android {

signingConfigs {

create("release") {

storeFile = file("/path/to/my-release-key.keystore")

storePassword = "your-store-password"

keyAlias = "my-key-alias"

keyPassword = "your-key-password"

}

}

buildTypes {

getByName("release") {

signingConfig = signingConfigs.getByName("release")

isMinifyEnabled = true

proguardFiles(

getDefaultProguardFile("proguard-android-optimize.txt"),

"proguard-rules.pro"

)

}

}

}

```

**安全提示：** 不要将密钥和密码提交到版本控制系统！

### 5.3 构建已签名的 APK

```bash

npm run tauri android build -- --release

```

生成的已签名 APK 位于：

```

src-tauri/gen/android/app/build/outputs/apk/release/app-release.apk

```

## 六、常见问题与解决方案

### 6.1 NDK 未找到

**错误信息：**

```

NDK not found

```

**解决方案：**

  • 确保在 Android Studio 中安装了 NDK

  • 检查 `NDK_HOME` 环境变量是否正确设置

  • 重启终端使环境变量生效

### 6.2 Rust 编译失败

**错误信息：**

```

error: linker `aarch64-linux-android33-clang` not found

```

**解决方案：**

  • 检查 `~/.cargo/config.toml` 中的路径是否正确

  • 确认 NDK 版本与配置文件中的路径匹配

  • 验证 NDK 工具链是否完整安装

### 6.3 Gradle 构建失败

**错误信息：**

```

Could not resolve all dependencies

```

**解决方案：**

```bash

cd src-tauri/gen/android

./gradlew clean

./gradlew build --refresh-dependencies

```

### 6.4 应用在 Android 设备上无法加载

**可能原因：**

  • Vue3 路由配置问题

  • 资源路径错误

**解决方案：**

  1. 确保 Vue Router 使用 `createWebHistory` 而非 `createWebHashHistory`

  2. 检查 `vite.config.js` 中的 `base` 配置：

```javascript

export default defineConfig({

base: './', // 使用相对路径

// ...

})

```

### 6.5 M1 芯片特定问题

**错误信息：**

```

Bad CPU type in executable

```

**解决方案：**

  • 确保使用 Rosetta 2：`softwareupdate --install-rosetta`

  • 某些工具可能需要通过 Rosetta 运行

## 七、优化建议

### 7.1 减小 APK 体积

  1. **启用代码混淆：**

编辑 `src-tauri/gen/android/app/build.gradle.kts`：

```kotlin

buildTypes {

getByName("release") {

isMinifyEnabled = true

isShrinkResources = true

}

}

```

  1. **优化 Vue3 构建：**

```javascript

// vite.config.js

export default defineConfig({

build: {

minify: 'terser',

terserOptions: {

compress: {

drop_console: true,

drop_debugger: true

}

}

}

})

```

### 7.2 性能优化

  1. **启用 WebView 硬件加速**

  2. **使用 Vue3 的生产模式**

  3. **压缩静态资源**

7.3 构建多架构 APK

```bash

构建 App Bundle（推荐用于 Google Play）

cd src-tauri/gen/android

./gradlew bundleRelease

```

生成的 AAB 文件位于：

```

app/build/outputs/bundle/release/app-release.aab

```

## 八、总结

通过以上步骤，你已经成功将 Vue3 项目打包成 Android APK。整个流程包括：

  1. ✅ 安装 Rust、Android SDK、NDK 等开发环境

  2. ✅ 为 Vue3 项目集成 Tauri 框架

  3. ✅ 配置 Android 平台支持

  4. ✅ 构建和签名 APK

  5. ✅ 解决常见问题

**关键要点：**

  • Tauri 提供了比 Electron 更轻量的解决方案

  • M1 芯片需要特别注意 NDK 工具链配置

  • 确保 Vue3 项目使用相对路径以适配移动端

  • 生产环境务必使用签名的 release 版本

**下一步：**

  • 测试应用在不同 Android 设备上的兼容性

  • 优化应用性能和体积

  • 准备发布到 Google Play 或其他应用商店

## 参考资料

  • Tauri 官方文档\](https://tauri.app/)

  • Android 开发者文档\](https://developer.android.com/)

如有问题或建议，欢迎在评论区留言交流！

相关推荐
新缸中之脑2 小时前
Google：Rust实战评估
开发语言·后端·rust
LongJ_Sir2 小时前
Cesium--可拖拽气泡弹窗（对话框尾巴，Vue3版）
前端·javascript·vue.js
im_AMBER2 小时前
消失的最后一秒：SSE 流式联调中的“时序竞争”
前端·笔记·学习·http·sse
一只程序熊2 小时前
uniappx 配置 uni.chooseLocation 地图
android·uni-app x
RFCEO2 小时前
前端编程 课程十、：CSS 系统学习学前知识/准备
前端·css·层叠样式表·动效设计·前端页面布局6大通用法则·黄金分割比例法则·设计美观的前端
雄狮少年2 小时前
简单react agent（没有抽象成基类、子类，直接用）--- 非workflow版 ------demo1
前端·react.js·前端框架
Laughtin2 小时前
macos命令行更换终端代理的方法
macos·bash·mac
Yang-Never2 小时前
Android 应用启动 -＞ Android 多种方式启动同一进程，Application.onCreate() 会多次执行吗？
android·java·开发语言·kotlin·android studio
2501_916008892 小时前
iOS 开发助手工具，设备信息查看、运行日志、文件管理等方面
android·ios·小程序·https·uni-app·iphone·webview
热门推荐
01GitHub 镜像站点02【网络安全测试】Burp Suite工具使用说明、配置及常见问题（有关必回）03OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)04Claude Code Skills 实用使用手册05struts2 XML外部实体注入漏洞复现（CVE-2025-68493）06UV安装并设置国内源07在Trae中使用Pencil MCP08Open Code教程（四）| 高级配置与集成09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南