Tauri 轻量桌面应用：Rust 内核 + Web 前端

什么是 Tauri？

Tauri 是一个用于构建轻量、安全、高性能桌面应用的现代框架。它将 Rust 编写的安全内核 与 Web 前端技术（HTML/CSS/JS） 巧妙结合，让你用熟悉的前端技能就能打造原生体验的桌面程序。相比 Electron，Tauri 打包体积极小（通常不到 5 MB）、内存占用低，同时受益于 Rust 的内存安全与并发模型，从根本上减少了安全漏洞。

核心架构一览

┌──────────────────────────────┐
│          Web 前端             │
│  (React/Vue/Svelte/原生等)    │
│  ──── 通过 IPC 调用 ────────  │
│          Tauri API           │
├──────────────────────────────┤
│       Tauri Core (Rust)      │
│  - 窗口管理                  │
│  - 文件系统访问              │
│  - 系统通知                  │
│  - 菜单、托盘、自动更新等     │
├──────────────────────────────┤
│  操作系统原生能力 (Win/Mac/Linux) │
└──────────────────────────────┘

前端运行在系统内置的 WebView 中（Windows 用 WebView2，macOS 用 WKWebView，Linux 用 WebKitGTK），不内嵌 Chromium。Rust 后端通过命令（Commands）与前端安全通信，前端调用 invoke 即可触发 Rust 函数。

为什么选择 Tauri？

Tauri 特别适合工具类、桌面小组件、需要系统级能力但不想为体积和资源消耗妥协的项目。

环境准备

系统依赖

• Windows: Microsoft Edge WebView2（Windows 10 1803+ 已预装），Visual Studio C++ 生成工具。
• macOS: Xcode Command Line Tools（xcode-select --install）。
• Linux: libwebkit2gtk-4.0-dev, libgtk-3-dev, libappindicator3-dev 等。Ubuntu/Debian 可执行：

  sudo apt update
  sudo apt install -y libwebkit2gtk-4.0-dev libgtk-3-dev libappindicator3-dev librsvg2-dev patchelf
  

Rust 与 Node.js

• 安装 Rust：通过 rustup

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

• 安装 Node.js（推荐 LTS 版本）：用于前端工具链。

验证安装：

rustc --version  # 应显示 1.60+
cargo --version
node -v
npm -v

Tauri CLI

推荐使用 create-tauri-app 快速初始化：

npm create tauri-app@latest

按提示输入项目名、选择前端框架（Vanilla、React、Vue、Svelte 等），CLI 会自动生成脚手架。

或者手动安装：

cargo install tauri-cli

项目初始化与结构解析

使用 CLI 新建项目，这里以 React + TypeScript 为例：

npm create tauri-app@latest my-tauri-app -- --template react-ts
cd my-tauri-app
npm install

生成的关键目录：

my-tauri-app/
├── src/                # 前端 React 代码
├── public/
├── src-tauri/          # Tauri Rust 后端
│   ├── Cargo.toml
│   ├── tauri.conf.json # Tauri 配置核心
│   ├── src/
│   │   └── main.rs     # Rust 入口
│   ├── icons/          # 应用图标
│   └── build.rs
├── package.json
└── vite.config.ts

tauri.conf.json 快速解读

• build.devPath：开发时前端服务器地址。
• build.distDir：前端构建产物目录（如 ../dist）。
• tauri.windows：窗口配置（标题、宽高、全屏等）。
• tauri.security：安全策略，定义可调用的 API 权限。

开发你的第一个 Tauri 应用

启动开发模式

npm run tauri dev

该命令会同时启动前端热更新服务器和 Tauri 的 Rust 开发环境，自动打开桌面窗口。

编写 Rust 命令（后端）

在 src-tauri/src/main.rs 中添加命令：

#[tauri::command]
fn greet(name: &str) -> String {
    format!("你好, {}! 来自 Rust 的问候。", name)
}

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

在前端调用命令

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

function App() {
  const [msg, setMsg] = useState('');

  const handleGreet = async () => {
    const response = await invoke('greet', { name: '伙伴' });
    setMsg(response as string);
  };

  return (
    <div>
      <button onClick={handleGreet}>打招呼</button>
      <p>{msg}</p>
    </div>
  );
}

前端的 invoke 直接调用 Rust 定义的 greet 命令，数据通过安全的 IPC 传递。

常用 Tauri API 实战

读取与写入本地文件

Rust 端（文件操作）：

use std::fs;

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

#[tauri::command]
fn write_file(path: &str, content: &str) -> Result<(), String> {
    fs::write(path, content).map_err(|e| e.to_string())
}

前端调用：

const content = await invoke('read_file', { path: '/home/user/notes.txt' });
await invoke('write_file', { path: '/home/user/notes.txt', content: '新内容' });

注意：生产环境中必须限制文件访问范围，Tauri 会在安全配置中要求显式声明允许的路径。

系统通知

前端可直接使用 @tauri-apps/api/notification：

import { sendNotification } from '@tauri-apps/api/notification';

sendNotification({
  title: '提醒',
  body: '任务已完成！',
});

自定义系统菜单与托盘

在 main.rs 中添加菜单：

use tauri::{CustomMenuItem, Menu, Submenu, SystemTray, SystemTrayMenu};

fn main() {
    let open = CustomMenuItem::new("open".to_string(), "打开");
    let quit = CustomMenuItem::new("quit".to_string(), "退出");
    let submenu = Submenu::new("文件", Menu::new().add_item(open).add_item(quit));
    let menu = Menu::new().add_submenu(submenu);

    let tray_menu = SystemTrayMenu::new();
    let system_tray = SystemTray::new();

    tauri::Builder::default()
        .menu(menu)
        .system_tray(system_tray)
        .on_menu_event(|event| match event.menu_item_id() {
            "open" => { /* 处理打开 */ }
            "quit" => std::process::exit(0);
            _ => {}
        })
        .invoke_handler(tauri::generate_handler![])
        .run(tauri::generate_context!())
        .expect("error");
}

构建与分发

生成最终应用

npm run tauri build

Tauri 会根据当前操作系统生成对应的安装包：

• Windows: .msi, .exe（installer）
• macOS: .dmg, .app
• Linux: .deb, .AppImage

构建输出在 src-tauri/target/release/bundle/。

图标与签名

将 src-tauri/icons/ 下的默认图标替换为自己设计的图片，Tauri 会自动生成各平台所需的尺寸。macOS 需要开发者签名才能正常分发，可使用 codesign 或 CI 中的自动化签名工具。

自动更新

Tauri 内置了 tauri-plugin-updater。在 Cargo.toml 中添加依赖，并在 tauri.conf.json 配置更新端点：

"plugins": {
  "updater": {
    "endpoints": ["https://myupdateserver.com/updates/{{target}}/{{current_version}}"]
  }
}

生成更新清单文件后，应用可自动检测、下载并安装新版本。

性能与安全最佳实践

• 最小化 IPC 调用：将频繁操作批量化，使用 Rust 处理批量任务。
• 前端构建优化：开启代码分割、Tree shaking，使用现代框架的生产模式。
• 安全配置：
  • tauri.conf.json 中 security.csp 配置内容安全策略。
  • 通过 allowlist 精确控制 API 可用性（如 fs、shell、path 等）。
  • 外部资源锁定：限制可加载的远程 URL，防止 XSS。
• Rust 代码审计：谨慎使用 unsafe，优先使用 #[tauri::command] 类型安全的入参校验。

常见问题（FAQ）

Q：Tauri 支持多窗口吗？
A：支持。通过 Window 模块动态创建新窗口，或在 tauri.conf.json 中预定义多个窗口。

Q：能否调用 Rust 的异步函数？
A：可以。命令函数可声明为 async fn，Tauri 支持异步命令。

Q：前端如何访问 Node.js API？
A：不能。Tauri 后端是 Rust 环境，没有 Node.js，如有需求应通过 Rust 实现或调用系统 CLI。

Q：Tauri 如何进行自动化测试？
A：可使用 WebDriver 协议执行端到端测试，Tauri 官方提供 tauri-driver 适配器，配合 Selenium 或 WebdriverIO。

后续学习资源

• Tauri 官方文档
• Tauri GitHub 仓库
• Rust 语言圣经
• 社群：Tauri Discord / 中文社区（如掘金、知乎专栏）

现在你已经掌握了 Tauri 的核心流程，尝试用 Rust + Web 打造你的下一个精致桌面应用吧！