setting-up-tauri-projects

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Setting Up Tauri Projects

搭建Tauri项目

What is Tauri?

什么是Tauri？

Tauri is a framework for building tiny, fast binaries for all major desktop and mobile platforms. It combines any frontend that compiles to HTML/JS/CSS with Rust for the backend.

Key characteristics:

Minimal apps can be under 600KB (uses system webview, not bundled browser)
Built on Rust for memory, thread, and type safety
Supports virtually any frontend framework
Cross-platform: Windows, macOS, Linux, iOS, Android

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

核心特性：

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

System Prerequisites

系统前置要求

macOS

bash

undefined

bash

undefined

For desktop + iOS development

Install Xcode from Mac App Store

For desktop-only development (lighter option)

xcode-select --install

undefined

xcode-select --install

undefined

Windows

Microsoft C++ Build Tools: Download from Visual Studio, select "Desktop development with C++"
WebView2: Pre-installed on Windows 10 v1803+ (install manually if needed)
Rust toolchain:

powershell

winget install Rustlang.Rustup
rustup default stable-msvc

Microsoft C++ Build Tools：从Visual Studio官网下载，选择“使用C++的桌面开发”组件
WebView2：Windows 10 v1803及以上版本预装，若未安装可手动下载
Rust工具链：

powershell

winget install Rustlang.Rustup
rustup default stable-msvc

Linux

Debian/Ubuntu:

bash

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:

bash

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

Fedora:

bash

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

Debian/Ubuntu：

bash

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：

bash

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

Fedora：

bash

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

Rust (All Platforms)

Rust（全平台）

bash

undefined

bash

undefined

macOS/Linux

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

Windows (PowerShell)

winget install Rustlang.Rustup

undefined

winget install Rustlang.Rustup

undefined

Node.js

Required only for JavaScript/TypeScript frontends. Install LTS version from nodejs.org.

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

Mobile Development (Optional)

移动开发（可选）

Android (all platforms):

bash

undefined

Android（全平台）：

bash

undefined

Install Android Studio, then add Rust targets

rustup target add aarch64-linux-android armv7-linux-androideabi
i686-linux-android x86_64-linux-android


Set environment variables: `JAVA_HOME`, `ANDROID_HOME`, `NDK_HOME`

**iOS (macOS only):**
```bash

rustup target add aarch64-linux-android armv7-linux-androideabi
i686-linux-android x86_64-linux-android


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

**iOS（仅macOS）：**
```bash

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

undefined

brew install cocoapods

undefined

Creating a Project

创建项目

Method 1: create-tauri-app (Recommended)

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

Interactive scaffolding with framework templates.

bash

undefined

带有框架模板的交互式脚手架工具。

bash

undefined

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（无需Node.js）

cargo install create-tauri-app --locked cargo create-tauri-app

Shell scripts

Shell脚本

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


**Prompts you'll see:**
1. Project name
2. Bundle identifier (e.g., `com.example.app`)
3. Frontend language: TypeScript/JavaScript, Rust, or .NET
4. Package manager
5. UI template: vanilla, Vue, Svelte, React, SolidJS, Angular, Preact, Yew, Leptos, Sycamore

**After scaffolding:**
```bash
cd your-project
npm install
npm run tauri dev

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


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

**脚手架完成后：**
```bash
cd your-project
npm install
npm run tauri dev

Method 2: Manual Setup (Existing Projects)

方法2：手动配置（已有项目）

Add Tauri to an existing frontend project.

bash

undefined

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

bash

undefined

1. In your existing project, install Tauri CLI

1. 在现有项目中安装Tauri CLI

npm install -D @tauri-apps/cli@latest

2. Initialize Tauri (creates src-tauri directory)

2. 初始化Tauri（创建src-tauri目录）

npx tauri init


**tauri init prompts:**
- App name
- Window title
- Frontend dev server URL (e.g., `http://localhost:5173`)
- Frontend build output directory (e.g., `dist`)
- Frontend dev command (e.g., `npm run dev`)
- Frontend build command (e.g., `npm run build`)

```bash

npx tauri init


**tauri init提示项：**
- 应用名称
- 窗口标题
- 前端开发服务器URL（例如：`http://localhost:5173`）
- 前端构建输出目录（例如：`dist`）
- 前端开发命令（例如：`npm run dev`）
- 前端构建命令（例如：`npm run build`）

```bash

3. Start development

3. 启动开发服务

npx tauri dev

undefined

npx tauri dev

undefined

Project Structure

项目结构

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

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

Key Files

核心文件

tauri.conf.json - Primary configuration:

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 application code:

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 - Desktop entry point:

rust

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

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

capabilities/ - Define what commands JavaScript can invoke:

json

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

tauri.conf.json - 主配置文件：

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应用代码：

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 - 桌面端入口文件：

rust

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

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

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

json

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

Common Commands

常用命令

bash

undefined

bash

undefined

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

undefined

npm run tauri ios dev

undefined

Quick Reference: Supported Frontend Templates

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

Template	Languages	Notes
vanilla	JS, TS	No framework
react	JS, TS	Vite-based
vue	JS, TS	Vite-based
svelte	JS, TS	Vite-based
solid	JS, TS	Vite-based
angular	TS	Angular CLI
preact	JS, TS	Vite-based
yew	Rust	Rust WASM frontend
leptos	Rust	Rust WASM frontend
sycamore	Rust	Rust WASM frontend

模板	支持语言	说明
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前端