setting-up-tauri-projects

设置 Tauri 项目

什么是 Tauri？

Tauri 是一个用于为所有主流桌面和移动平台构建小巧、快速二进制文件的框架。它将任何可编译为 HTML/JS/CSS 的前端与用于后端的 Rust 结合起来。

主要特性：

• 最简应用可小于 600KB（使用系统 WebView，而非捆绑浏览器）
• 基于 Rust 构建，保障内存、线程和类型安全
• 几乎支持所有前端框架
• 跨平台：Windows、macOS、Linux、iOS、Android

系统前置条件

macOS

# For desktop + iOS development
# Install Xcode from Mac App Store

# For desktop-only development (lighter option)
xcode-select --install

Windows

1. Microsoft C++ Build Tools：从 Visual Studio 下载，选择“使用 C++ 的桌面开发”
2. WebView2：Windows 10 v1803 及更高版本预装（如有需要，可手动安装）
3. Rust 工具链：

winget install Rustlang.Rustup
rustup default stable-msvc

Linux

Debian/Ubuntu：

sudo apt update
sudo apt install libwebkit2gtk-4.1-dev build-essential curl wget file \
  libxdo-dev libssl-dev libayatana-appindicator3-dev librsvg2-dev

Arch Linux：

sudo pacman -S webkit2gtk-4.1 base-devel curl wget file openssl \
  appmenu-gtk-module libappindicator-gtk3 librsvg xdotool

Fedora：

sudo dnf install webkit2gtk4.1-devel openssl-devel curl wget file \
  libappindicator-gtk3-devel librsvg2-devel libxdo-devel \
  @development-tools

Rust（所有平台）

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

# Windows (PowerShell)
winget install Rustlang.Rustup

Node.js

仅 JavaScript/TypeScript 前端需要。从 nodejs.org 安装 LTS 版本。

移动端开发（可选）

Android（所有平台）：

# Install Android Studio, then add Rust targets
rustup target add aarch64-linux-android armv7-linux-androideabi \
  i686-linux-android x86_64-linux-android

设置环境变量：JAVA_HOME、ANDROID_HOME、NDK_HOME

iOS（仅 macOS）：

# Requires full Xcode (not just Command Line Tools)
rustup target add aarch64-apple-ios x86_64-apple-ios aarch64-apple-ios-sim

# Install Cocoapods
brew install cocoapods

创建项目

方法 1：create-tauri-app（推荐）

使用框架模板进行交互式项目搭建。

# npm
npm create tauri-app@latest

# pnpm
pnpm create tauri-app

# yarn
yarn create tauri-app

# bun
bun create tauri-app

# cargo (no Node.js required)
cargo install create-tauri-app --locked
cargo create-tauri-app

# Shell scripts
sh <(curl https://create.tauri.app/sh)        # Bash
irm https://create.tauri.app/ps | iex         # PowerShell

你会看到以下提示：

1. 项目名称
2. Bundle 标识符（例如，com.example.app）
3. 前端语言：TypeScript/JavaScript、Rust 或 .NET
4. 包管理器
5. UI 模板：vanilla、Vue、Svelte、React、SolidJS、Angular、Preact、Yew、Leptos、Sycamore

搭建完成后：

cd your-project
npm install
npm run tauri dev

方法 2：手动设置（现有项目）

将 Tauri 添加到现有前端项目。

# 1. In your existing project, install Tauri CLI
npm install -D @tauri-apps/cli@latest

# 2. Initialize Tauri (creates src-tauri directory)
npx tauri init

tauri init 提示：

• 应用名称
• 窗口标题
• 前端开发服务器 URL（例如，http://localhost:5173）
• 前端构建输出目录（例如，dist）
• 前端开发命令（例如，npm run dev）
• 前端构建命令（例如，npm run build）

# 3. Start development
npx tauri dev

项目结构

my-tauri-app/
├── package.json           # Frontend dependencies
├── index.html             # Frontend entry point
├── src/                   # Frontend source code
│   └── main.js
└── src-tauri/             # Rust backend
    ├── Cargo.toml         # Rust dependencies
    ├── Cargo.lock
    ├── build.rs           # Tauri build script
    ├── tauri.conf.json    # Main Tauri configuration
    ├── capabilities/      # Permission/capability definitions
    ├── icons/             # App icons (all formats)
    └── src/
        ├── lib.rs         # Main Rust code + mobile entry point
        └── main.rs        # Desktop entry point

关键文件

tauri.conf.json - 主要配置：

{
  "productName": "my-app",
  "version": "0.1.0",
  "identifier": "com.example.my-app",
  "build": {
    "devUrl": "http://localhost:5173",
    "frontendDist": "../dist"
  },
  "app": {
    "windows": [{ "title": "My App", "width": 800, "height": 600 }]
  }
}

src/lib.rs - Rust 应用代码：

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

src/main.rs - 桌面入口点：

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
    app_lib::run();
}

capabilities/ - 定义 JavaScript 可以调用的命令：

{
  "identifier": "main-capability",
  "windows": ["main"],
  "permissions": ["core:default"]
}

常用命令

# Development with hot reload
npm run tauri dev

# Build production binary
npm run tauri build

# Generate app icons from source image
npm run tauri icon path/to/icon.png

# Add Android target
npm run tauri android init

# Add iOS target
npm run tauri ios init

# Run on Android
npm run tauri android dev

# Run on iOS simulator
npm run tauri ios dev

快速参考：支持的前端模板

模板	语言	说明
vanilla	JS、TS	无框架
react	JS、TS	基于 Vite
vue	JS、TS	基于 Vite
svelte	JS、TS	基于 Vite
solid	JS、TS	基于 Vite
angular	TS	Angular CLI
preact	JS、TS	基于 Vite
yew	Rust	Rust WASM 前端
leptos	Rust	Rust WASM 前端
sycamore	Rust	Rust WASM 前端