tauri-desktop

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tauri Desktop Skill

Tauri 桌面与移动应用开发

Build lightweight, secure desktop (and mobile) apps with Tauri 2.0 — Rust backend, web frontend.

使用Tauri 2.0构建轻量、安全的桌面(及移动)应用——基于Rust后端与Web前端。

Why Tauri

为什么选择Tauri

FeatureTauriElectron
Bundle size2-10 MB80-150 MB
Memory usage30-80 MB100-300 MB
Backend languageRustNode.js
Security modelCapability-based permissionsFull Node.js access
Mobile supportYes (Tauri 2.0)No
Auto-updaterBuilt-inelectron-updater

特性TauriElectron
包体积2-10 MB80-150 MB
内存占用30-80 MB100-300 MB
后端语言RustNode.js
安全模型基于能力的权限机制完整Node.js访问权限
移动端支持支持(Tauri 2.0)不支持
自动更新内置功能electron-updater插件

Project Structure

项目结构

project/
├── src/                          # Frontend (any web framework)
│   ├── main.ts
│   ├── App.tsx                   # React/Vue/Svelte/vanilla
│   └── styles.css
├── src-tauri/                    # Rust backend
│   ├── src/
│   │   ├── main.rs              # Entry point
│   │   ├── lib.rs               # Commands and setup
│   │   └── commands/            # IPC command modules
│   │       ├── mod.rs
│   │       └── files.rs
│   ├── capabilities/            # Security permissions
│   │   └── default.json
│   ├── icons/                   # App icons
│   ├── Cargo.toml               # Rust dependencies
│   └── tauri.conf.json          # Tauri configuration
├── package.json
├── vite.config.ts               # Frontend bundler
└── tsconfig.json

project/
├── src/                          # 前端(支持任意Web框架)
│   ├── main.ts
│   ├── App.tsx                   # React/Vue/Svelte/原生JS均可
│   └── styles.css
├── src-tauri/                    # Rust后端
│   ├── src/
│   │   ├── main.rs              # 入口文件
│   │   ├── lib.rs               # 命令与配置
│   │   └── commands/            # IPC命令模块
│   │       ├── mod.rs
│   │       └── files.rs
│   ├── capabilities/            # 安全权限配置
│   │   └── default.json
│   ├── icons/                   # 应用图标
│   ├── Cargo.toml               # Rust依赖管理
│   └── tauri.conf.json          # Tauri配置文件
├── package.json
├── vite.config.ts               # 前端打包工具配置
└── tsconfig.json

IPC Commands

IPC命令

Rust Side (Backend)

Rust端(后端)

rust
// src-tauri/src/lib.rs
use tauri::Manager;

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! From Rust.", name)
}

#[tauri::command]
async fn read_file(path: String) -> Result<String, String> {
    std::fs::read_to_string(&path).map_err(|e| e.to_string())
}

#[tauri::command]
async fn save_settings(
    app: tauri::AppHandle,
    settings: serde_json::Value,
) -> Result<(), String> {
    let path = app.path().app_config_dir().map_err(|e| e.to_string())?;
    std::fs::create_dir_all(&path).map_err(|e| e.to_string())?;
    let file = path.join("settings.json");
    std::fs::write(file, settings.to_string()).map_err(|e| e.to_string())
}

pub fn run() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet, read_file, save_settings])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
rust
// src-tauri/src/lib.rs
use tauri::Manager;

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! From Rust.", name)
}

#[tauri::command]
async fn read_file(path: String) -> Result<String, String> {
    std::fs::read_to_string(&path).map_err(|e| e.to_string())
}

#[tauri::command]
async fn save_settings(
    app: tauri::AppHandle,
    settings: serde_json::Value,
) -> Result<(), String> {
    let path = app.path().app_config_dir().map_err(|e| e.to_string())?;
    std::fs::create_dir_all(&path).map_err(|e| e.to_string())?;
    let file = path.join("settings.json");
    std::fs::write(file, settings.to_string()).map_err(|e| e.to_string())?;
    Ok(())
}

pub fn run() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet, read_file, save_settings])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Frontend Side (TypeScript)

前端(TypeScript)

typescript
import { invoke } from '@tauri-apps/api/core';

// Call Rust commands from frontend
const greeting = await invoke<string>('greet', { name: 'World' });

const content = await invoke<string>('read_file', { path: '/tmp/test.txt' });

await invoke('save_settings', {
  settings: { theme: 'dark', fontSize: 14 },
});

typescript
import { invoke } from '@tauri-apps/api/core';

// 从前端调用Rust命令
const greeting = await invoke<string>('greet', { name: 'World' });

const content = await invoke<string>('read_file', { path: '/tmp/test.txt' });

await invoke('save_settings', {
  settings: { theme: 'dark', fontSize: 14 },
});

Security Model (Capabilities)

安全模型(基于能力的权限)

json
// src-tauri/capabilities/default.json
{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Default app permissions",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "dialog:default",
    "fs:default",
    {
      "identifier": "fs:allow-read-text-file",
      "allow": [{ "path": "$APPDATA/**" }]
    },
    {
      "identifier": "fs:allow-write-text-file",
      "allow": [{ "path": "$APPDATA/**" }]
    }
  ]
}
Key security principles:
  • Allowlist by default: Frontend can only access explicitly permitted APIs
  • Scoped filesystem access: Restrict to specific directories
  • No arbitrary shell access: Commands must be predefined in Rust
  • CSP enforced: Content Security Policy headers set automatically

json
// src-tauri/capabilities/default.json
{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "默认应用权限",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "dialog:default",
    "fs:default",
    {
      "identifier": "fs:allow-read-text-file",
      "allow": [{ "path": "$APPDATA/**" }]
    },
    {
      "identifier": "fs:allow-write-text-file",
      "allow": [{ "path": "$APPDATA/**" }]
    }
  ]
}
核心安全原则:
  • 默认白名单机制:前端仅能访问明确授权的API
  • 文件系统访问范围限制:仅允许访问指定目录
  • 无任意Shell访问权限:命令必须在Rust中预定义
  • 强制启用CSP:自动设置内容安全策略头

Plugins (Tauri 2.0)

插件系统(Tauri 2.0)

toml
undefined
toml
undefined

src-tauri/Cargo.toml

src-tauri/Cargo.toml

[dependencies] tauri = { version = "2", features = [] } tauri-plugin-dialog = "2" tauri-plugin-fs = "2" tauri-plugin-shell = "2" tauri-plugin-store = "2" tauri-plugin-updater = "2" tauri-plugin-notification = "2"

```rust
// Register plugins
tauri::Builder::default()
    .plugin(tauri_plugin_dialog::init())
    .plugin(tauri_plugin_fs::init())
    .plugin(tauri_plugin_store::Builder::new().build())
    .plugin(tauri_plugin_updater::Builder::new().build())
    .invoke_handler(tauri::generate_handler![greet])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");

[dependencies] tauri = { version = "2", features = [] } tauri-plugin-dialog = "2" tauri-plugin-fs = "2" tauri-plugin-shell = "2" tauri-plugin-store = "2" tauri-plugin-updater = "2" tauri-plugin-notification = "2"

```rust
// 注册插件
tauri::Builder::default()
    .plugin(tauri_plugin_dialog::init())
    .plugin(tauri_plugin_fs::init())
    .plugin(tauri_plugin_store::Builder::new().build())
    .plugin(tauri_plugin_updater::Builder::new().build())
    .invoke_handler(tauri::generate_handler![greet])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");

Auto-Updater

自动更新

json
// src-tauri/tauri.conf.json (excerpt)
{
  "plugins": {
    "updater": {
      "pubkey": "YOUR_PUBLIC_KEY",
      "endpoints": [
        "https://releases.example.com/{{target}}/{{arch}}/{{current_version}}"
      ]
    }
  }
}
typescript
// Frontend update check
import { check } from '@tauri-apps/plugin-updater';

const update = await check();
if (update) {
  await update.downloadAndInstall();
  await relaunch();
}

json
// src-tauri/tauri.conf.json(节选)
{
  "plugins": {
    "updater": {
      "pubkey": "YOUR_PUBLIC_KEY",
      "endpoints": [
        "https://releases.example.com/{{target}}/{{arch}}/{{current_version}}"
      ]
    }
  }
}
typescript
// 前端检查更新
import { check } from '@tauri-apps/plugin-updater';

const update = await check();
if (update) {
  await update.downloadAndInstall();
  await relaunch();
}

Building and Distribution

构建与分发

bash
undefined
bash
undefined

Development

开发模式

npm run tauri dev
npm run tauri dev

Build for current platform

为当前平台构建

npm run tauri build
npm run tauri build

Build for specific target

为指定目标平台构建

npm run tauri build --target x86_64-pc-windows-msvc npm run tauri build --target aarch64-apple-darwin npm run tauri build --target x86_64-unknown-linux-gnu
npm run tauri build --target x86_64-pc-windows-msvc npm run tauri build --target aarch64-apple-darwin npm run tauri build --target x86_64-unknown-linux-gnu

Mobile (Tauri 2.0)

移动端(Tauri 2.0)

npm run tauri android dev npm run tauri ios dev
undefined
npm run tauri android dev npm run tauri ios dev
undefined

Distribution Formats

分发格式

PlatformFormats
macOS.dmg, .app
Windows.msi, .exe (NSIS)
Linux.deb, .rpm, .AppImage
Android.apk, .aab
iOS.ipa

平台支持格式
macOS.dmg, .app
Windows.msi, .exe (NSIS)
Linux.deb, .rpm, .AppImage
Android.apk, .aab
iOS.ipa

Development Tips

开发技巧

  • Use
    window.__TAURI__
    to detect Tauri environment in frontend
  • State management: Use Tauri's
    State
    for Rust-side state, frontend store for UI state
  • File dialogs: Use
    @tauri-apps/plugin-dialog
    instead of browser file input
  • System tray: Configure in
    tauri.conf.json
    with menu items
  • Multi-window: Create with
    WebviewWindow::new()
    from Rust or
    WebviewWindow.create()
    from JS

  • 在前端中使用
    window.__TAURI__
    检测Tauri运行环境
  • 状态管理:Rust端状态使用Tauri的
    State
    ,UI状态使用前端状态管理库
  • 文件对话框:使用
    @tauri-apps/plugin-dialog
    替代浏览器原生文件输入
  • 系统托盘:在
    tauri.conf.json
    中配置菜单项
  • 多窗口:通过Rust的
    WebviewWindow::new()
    或JS的
    WebviewWindow.create()
    创建

Related Resources

相关资源

  • ~/.claude/skills/rust/SKILL.md
    - Rust language patterns
  • ~/.claude/agents/desktop-developer.md
    - Desktop development agent
  • ~/.claude/docs/reference/stacks/rust.md
    - Rust stack guide

Small binaries. Strong security. Native performance. Web flexibility.
  • ~/.claude/skills/rust/SKILL.md
    - Rust语言模式指南
  • ~/.claude/agents/desktop-developer.md
    - 桌面开发代理
  • ~/.claude/docs/reference/stacks/rust.md
    - Rust技术栈指南

体积小巧 · 安全性高 · 原生性能 · Web灵活性