Tauri on Liangweidong's blog

Tauri 2.x 跨平台桌面应用：Rust + WebView2 实战

Fri, 15 May 2020 00:00:00 +0800

什么是 Tauri 2.x

Tauri 是 2020 年起 Rust 生态的跨平台桌面应用框架，2.0 版本（2024-10 GA）带来更完善的插件体系和移动端支持。

核心架构

前端：任意 Web 框架（React / Vue / Svelte / Solid）
后端：Rust 二进制，编译成原生代码
WebView：复用系统 WebView（Windows WebView2 / macOS WKWebView / Linux WebKitGTK）
进程间通信：Rust 命令 + JS 桥

优势

包大小 2~10MB（vs Electron 80MB+）
内存低：复用系统 WebView，不开新 Chromium
Rust 内存安全：无 GC 抖动
细粒度权限：声明式 ACL
移动端支持（2.0+）：iOS / Android

前置环境

通用

Rust 工具链：curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
Node.js 18+（推荐 22 LTS）
包管理：pnpm

Windows

Microsoft C++ Build Tools（安装时勾选"使用 C++ 的桌面开发"）
WebView2 Runtime（Win10 1803+ 预装）
- 旧版：下载 https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/

macOS

1

xcode-select --install

Linux (Debian/Ubuntu)

1
2
3
4
5
6
7
8


sudo apt install -y \
 libwebkit2gtk-4.1-dev \
 libgtk-3-dev \
 libayatana-appindicator3-dev \
 librsvg2-dev \
 libssl-dev \
 libjavascriptcoregtk-4.1-dev \
 libsoup-3.0-dev

创建项目

1. 创建工作区

1
2
3
4


mkdir -p tauri-app && cd tauri-app

# pnpm-workspace.yaml
nvim pnpm-workspace.yaml

1
2
3


packages:
 - 'frontend'
 - 'src-tauri'

2. 创建 Vite + React 前端

1

pnpm create vite frontend --template react-ts

3. 添加 Tauri CLI

1

pnpm add -D @tauri-apps/cli@latest -w

package.json 会加：

1

"@tauri-apps/cli": "^2.11.1"

4. 初始化 Tauri

1

pnpm tauri init

按提示填写：

1
2
3
4
5
6


✔ What is your app name? · tauri-app
✔ What should the window title be? · tauri-app
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../frontend/dist
✔ What is the url of your dev server? http://localhost:1420
✔ What is your frontend dev command? · pnpm -F frontend dev
✔ What is your frontend build command? · pnpm -F frontend build

5. 安装依赖

1
2


pnpm install
mkdir -p frontend/dist # dist 必须存在

6. 修改 tauri.conf.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


{
 "productName": "tauri-app",
 "version": "0.1.0",
 "identifier": "com.example.tauri-app",
 "build": {
 "frontendDist": "../frontend/dist",
 "devUrl": "http://localhost:1420",
 "beforeDevCommand": "pnpm -F frontend dev",
 "beforeBuildCommand": "pnpm -F frontend build"
 },
 "app": {
 "windows": [
 {
 "title": "tauri-app",
 "width": 1200,
 "height": 800
 }
 ],
 "security": {
 "csp": null
 }
 }
}

开发与打包

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# 开发（自动打开 DevTools 调试）
pnpm tauri dev

# 打包
pnpm tauri build

# 结果
# Windows: src-tauri/target/release/tauri-app.exe
# macOS: src-tauri/target/release/bundle/macos/tauri-app.app
# Linux: src-tauri/target/release/bundle/deb/*.deb

Cargo 工作区改造

Tauri 2.x 推荐用 Cargo 工作区管理（多包）：

1
2
3
4


# Cargo.toml (根目录)
[workspace]
members = ["src-tauri"]
resolver = "2"

迁移步骤：

删 src-tauri/target（构建会在根目录的 target 重新生成）
迁移 src-tauri/.gitignore 到根目录并修改
删 frontend/.gitignore（如果根目录有覆盖）

根目录 .gitignore：

1
2
3
4
5


**/target/
/src-tauri/gen/schemas

**/node_modules
**/dist

Vite 配置

frontend/vite.config.ts：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

const host = process.env.TAURI_DEV_HOST;

export default defineConfig({
 plugins: [react()],
 // 防止 Vite 清除 Rust 显示的错误
 clearScreen: false,
 server: {
 port: 5173,
 strictPort: true, // Tauri 需要固定端口
 host: host || false,
 hmr: host
 ? {
 protocol: "ws",
 host,
 port: 5174,
 }
 : undefined,
 watch: {
 // 告诉 Vite 忽略 src-tauri 目录
 ignored: ["**/src-tauri/**"],
 },
 },
 envPrefix: ["VITE_", "TAURI_ENV_*"],
 build: {
 // Windows 用 chromium，其他用 safari13
 target:
 process.env.TAURI_ENV_PLATFORM == "windows" ? "chrome105" : "safari13",
 minify: !process.env.TAURI_ENV_DEBUG ? "esbuild" : false,
 sourcemap: !!process.env.TAURI_ENV_DEBUG,
 },
});

Rust 后端命令

Tauri 2.x 用 #[tauri::command] 宏定义命令：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


// src-tauri/src/main.rs (或 src/lib.rs)
use tauri::Manager;

#[tauri::command]
fn greet(name: &str) -> String {
 format!("Hello, {}! 你好, Tauri!", name)
}

#[tauri::command]
async fn fetch_data(url: String) -> Result<String, String> {
 reqwest::get(&url)
 .await
 .map_err(|e| e.to_string())?
 .text()
 .await
 .map_err(|e| e.to_string())
}

fn main() {
 tauri::Builder::default()
 .invoke_handler(tauri::generate_handler![greet, fetch_data])
 .setup(|app| {
 #[cfg(debug_assertions)]
 {
 let window = app.get_webview_window("main").unwrap();
 window.open_devtools();
 }
 Ok(())
 })
 .run(tauri::generate_context!())
 .expect("error while running tauri application");
}

前端调用 Rust 命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


// frontend/src/App.tsx
import { invoke } from "@tauri-apps/api/core";
import { useState } from "react";

function App() {
 const [greeting, setGreeting] = useState("");

 async function handleClick() {
 const msg = await invoke<string>("greet", { name: "World" });
 setGreeting(msg);
 }

 return (
 <div>
 <button onClick={handleClick}>调用 Rust</button>
 <p>{greeting}</p>
 </div>
 );
}

export default App;

常用插件

1
2
3
4
5
6
7
8


pnpm tauri add fs
pnpm tauri add dialog
pnpm tauri add notification
pnpm tauri add shell
pnpm tauri add http
pnpm tauri add store
pnpm tauri add window
pnpm tauri add updater

权限配置

src-tauri/capabilities/default.json：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


{
 "$schema": "../gen/schemas/desktop-schema.json",
 "identifier": "default",
 "description": "默认权限",
 "windows": ["main"],
 "permissions": [
 "core:default",
 "fs:allow-read-text-file",
 "fs:allow-write-text-file",
 "dialog:default",
 "notification:default"
 ]
}

文件系统

1
2
3
4
5
6
7
8


// Rust
use tauri_plugin_fs::FsExt;

#[tauri::command]
fn read_config(app: tauri::AppHandle) -> Result<String, String> {
 let path = app.path().app_config_dir().unwrap().join("config.json");
 std::fs::read_to_string(path).map_err(|e| e.to_string())
}

1
2
3
4


// 前端
import { readTextFile } from '@tauri-apps/plugin-fs';

const content = await readTextFile('/path/to/file.txt');

状态管理

Tauri 用 tauri::State 在命令间共享状态：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


use std::sync::Mutex;

struct AppState {
 counter: Mutex<i32>,
}

#[tauri::command]
fn increment(state: tauri::State<AppState>) -> i32 {
 let mut count = state.counter.lock().unwrap();
 *count += 1;
 *count
}

fn main() {
 tauri::Builder::default()
 .manage(AppState { counter: Mutex::new(0) })
 .invoke_handler(tauri::generate_handler![increment])
 .run(tauri::generate_context!())
 .expect("failed to run app");
}

事件系统

1
2
3
4
5
6
7


// Rust 发送事件
use tauri::Emitter;

#[tauri::command]
fn start_task(app: tauri::AppHandle) {
 app.emit("task-progress", "started").unwrap();
}

1
2
3
4
5
6
7
8
9


// 前端监听
import { listen } from '@tauri-apps/api/event';

const unlisten = await listen<string>('task-progress', (event) => {
 console.log('收到:', event.payload);
});

// 取消监听
unlisten();

跨平台打包

1
2
3
4
5
6
7
8


# 当前平台
pnpm tauri build

# 指定平台（需要对应工具链）
pnpm tauri build --target x86_64-pc-windows-msvc
pnpm tauri build --target x86_64-apple-darwin
pnpm tauri build --target aarch64-apple-darwin
pnpm tauri build --target x86_64-unknown-linux-gnu

性能对比

指标	Tauri 2.x	Electron
包大小（Hello World）	3~5MB	80MB
内存空闲	30~80MB	100~200MB
启动时间	0.3~1s	1.5~3s
CPU 占用	低	中等

下一步

Electron 入门，看 2018-12-15《Electron 跨平台桌面应用》
桌面开发技术栈对比，看 2014-08-15《桌面开发技术栈对比》

参考资料

Tauri 官方：https://tauri.app/
Tauri 2.x 文档：https://v2.tauri.app/
Awesome Tauri：https://github.com/tauri-apps/awesome-tauri
tauri-plugin-* 插件列表：https://v2.tauri.app/plugin/

桌面开发技术栈对比：Electron vs Tauri vs Qt vs Fyne

Fri, 15 Aug 2014 00:00:00 +0800

跨平台桌面应用 4 大技术栈

技术	底层	语言	包大小	性能	生态
Electron	Chromium + Node.js	JS/TS	80~150MB	★★★	★★★★★
Tauri	系统 WebView + Rust	TS + Rust	2~10MB	★★★★★	★★★
Qt	Qt 库	C++ / QML / Python	30~80MB	★★★★★	★★★★
Fyne	系统 GUI	Go	10~30MB	★★★★	★★

一、Electron

原理

Chromium：渲染 UI（每个窗口一个）
Node.js：调用本地 API（文件系统、进程、IPC）
主进程 + 渲染进程：主进程（Node.js）管理窗口，渲染进程（Chromium）展示 UI

优势

Web 生态完整：React、Vue 任意用
跨平台：Windows / macOS / Linux 一套代码
第三方 SDK 丰富：自动更新、native dialog、native menu

劣势

包大：80MB 起步
内存高：每个窗口一个 Chromium
性能：JS 引擎有 GC 抖动

代表应用

VSCode、Slack、Discord、Notion、Postman、Figma Desktop

适用场景

内部工具 / 中后台
重 UI 重数据展示
团队 JS 技术栈

二、Tauri

原理

系统 WebView：Windows 用 WebView2，macOS 用 WKWebView，Linux 用 WebKitGTK
Rust 后端：编译成原生二进制，提供 IPC、文件系统、shell 等
前端任意：React / Vue / Svelte / Solid / 纯 HTML

优势

极小包：2~10MB（vs Electron 80MB）
低内存：复用系统 WebView
Rust 后端：性能强、安全（内存安全）
细粒度权限：声明式 ACL

劣势

WebView 跨平台表现不一致（Windows 较新，Linux GTK 旧）
生态比 Electron 小
学习曲线：Rust + 前端

代表应用

各种 Rust 生态工具
部分 VSCode 插件、Cursor 编辑器
OpenCode、cc-connect、tinyhumans/openhuman

适用场景

追求包大小 / 启动速度
Rust 团队
命令行 + GUI 一体

三、Qt

原理

Qt 库：跨平台 C++ GUI 库
QWidget：传统 UI
QML：声明式 UI（类 QML + JavaScript）
PyQt / PySide：Python 绑定

优势

性能极强：原生绘制
跨平台：Windows / macOS / Linux / Android / iOS / 嵌入式
工业级：KDE、Autodesk Maya、VirtualBox、VLC
工具链成熟：Qt Creator IDE

劣势

学习曲线陡：C++ + Qt 框架
商业授权：LGPL / GPL / Commercial 三种
包大：30MB+
UI 不够现代（vs Web）

适用场景

工业控制 / 嵌入式 UI
科学计算 / 数据可视化
跨平台 + 高性能

四、Fyne

原理

Go 语言：编译成单一二进制
系统原生控件：Windows GDI、macOS Cocoa、Linux GTK
声明式 API：类 Flutter 风格

优势

跨平台编译：Go 一份代码，Windows/macOS/Linux 任意编译
单二进制：无外部依赖
小包：10~30MB
简单易学

劣势

生态小：第三方库少
UI 不够丰富：控件有限
性能中等：没有 GPU 加速

适用场景

Go 团队
内部工具
简单桌面应用

详细对比

包大小

应用	Electron	Tauri	Qt	Fyne
Hello World	80MB	3MB	30MB	12MB
复杂应用（VSCode 级别）	200MB+	15MB	100MB	40MB

启动时间

应用	Electron	Tauri	Qt	Fyne
冷启动	1.5~3s	0.3~1s	0.2~0.5s	0.5~1s
热启动	0.5~1s	0.1~0.3s	0.1~0.2s	0.2~0.5s

内存占用

应用	Electron	Tauri	Qt	Fyne
空闲	100~200MB	30~80MB	20~50MB	30~70MB
复杂场景	500MB+	150MB	100MB	150MB

选型决策树

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


你的团队用什么语言？
├── JS/TS → Electron（生态最好）
├── Rust → Tauri（性能 + 体积最优）
├── C++ → Qt（性能 + 工业级）
├── Go → Fyne（最简单）
└── Python → PyQt / PySide

你的核心需求是？
├── 包小 + 快 → Tauri
├── 生态丰富 → Electron
├── 高性能 3D / 工业 → Qt
└── Go 写小工具 → Fyne

安装包大小优化

Electron

移除不必要的依赖
用 electron-builder 拆分 platform / arch
用 asar 压缩资源

Tauri

用 release 模式（默认）
启用 LTO（Link Time Optimization）
拆分 release（不同 OS 单独打包）

Qt

静态链接 vs 动态链接
删除用不到的 Qt 模块

Fyne

UPX 压缩
Go 1.20+ 链接器优化

跨平台坑

macOS

签名 + 公证（notarization）必需
沙箱（sandbox）
Apple Silicon（arm64）vs Intel（x64）

Linux

各种发行版：deb / rpm / AppImage / Flatpak
WebView 版本：Ubuntu LTS 用 snap，WebView 是 Chromium

Windows

32 / 64 位
WebView2 Runtime（Win10 1803+ 预装，旧版需引导安装）

下一步

Electron 入门，看 2018-12-15《Electron 跨平台桌面应用》
Tauri 2.x 实战，看 2020-05-15《Tauri 2.x 跨平台桌面应用》
Fyne 入门，看 2016-10-15《Go-Fyne 入门》

参考资料

Electron 官方：https://www.electronjs.org/
Tauri 官方：https://tauri.app/
Qt 官方：https://www.qt.io/
Fyne 官方：https://fyne.io/
Wails（Go + WebView）：https://wails.io/
Flutter Desktop：https://flutter.dev/desktop