Tauri 2.0 深度实战：当 Rust 后端遇见 Web 前端——从移动端支持到桌面端瘦身的 Electron 替代完整指南（2026）

一、背景：桌面应用开发的十字路口

1.1 Electron 的十年统治与隐痛

2008 年，GitHub 发布了 Atom 编辑器。虽然 Atom 本身在 2022 年退出历史舞台，但它开创的 Electron 架构却统治了桌面应用开发长达十年。VS Code、Slack、Discord、Figma、WhatsApp Desktop……这些我们每天都在用的工具，背后都是 Electron。

Electron 的成功逻辑很容易理解：Web 开发者可以直接用 HTML/CSS/JavaScript 构建桌面应用，无需学习 Qt、wxWidgets 或 Swift——这大幅降低了桌面端开发的门槛。但代价同样沉重。

// 一个最简单的 Electron 应用
// main.js
const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
})

看似简单的代码背后，捆绑的是整个 Chromium 渲染引擎+Node.js 运行时。这就好比你只是想去隔壁超市买瓶水，却开了一辆重型卡车过去。

Electron 的三大痛点：

• 安装包体积：一个空白 Electron 应用打包后的 .dmg 文件约 120-150MB，.exe 安装程序更夸张地达到 200MB+。对比之下，用原生框架开发的同类应用通常只有 10-30MB。
• 内存占用：Electron 应用启动后常驻 150-300MB 内存，每个窗口独立进程，多窗口场景下内存倍增。4GB 内存的机器同时开着 VS Code、Slack、Discord——基本上就卡成幻灯片了。
• 安全模型：Electron 的 Node.js 集成模型让 XSS 漏洞可以上升为远程代码执行。虽然后续引入了 contextIsolation 和 sandbox 模式，但本质上 Chromium 的庞大攻击面仍然存在。

1.2 替代者的崛起

过去几年，开发者社区从未停止寻找 Electron 的替代方案。Flutter Desktop（使用 Dart+Skia 自绘引擎）、Qt for Python、.NET MAUI、JavaFX 都试图分一杯羹，但没有一个真正触及 Electron 的统治地位，原因很简单：它们都要求开发者离开自己熟悉的 Web 技术栈。

直到 Tauri 的出现。

Tauri 的核心思路很聪明：用系统自带的 WebView（而非捆绑 Chromium）作为渲染引擎，用 Rust 作为后端语言。 这意味着：

• 包体从 120MB 骤降到 3-8MB
• 内存占用从 150MB 降到 30-50MB
• Rust 的内存安全特性消除了整类安全漏洞
• 开发者仍然可以用 React、Vue、Svelte 等任何前端框架

2024 年底 Tauri 2.0 稳定版发布，2025-2026 年迎来了移动端支持（iOS + Android）的里程碑。这不再只是一个"桌面端 Electron 替代品"，而是一个真正的跨平台应用框架——一套代码，六端运行（Windows/macOS/Linux/iOS/Android）。

二、Tauri 核心架构深度解析

2.1 多进程架构全景

Tauri 采用三进程模型，比 Electron 的双进程模型更细粒度、更安全：

┌─────────────────────────────────────────────────────────────┐
│                      Tauri 应用进程模型                      │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────────────┐    ┌──────────────────────────┐    │
│  │     Core 进程       │    │    WebView 进程           │    │
│  │   (Rust 主进程)     │◄──►│  (系统原生 WebView)       │    │
│  │                     │ IPC│                          │    │
│  │  - 窗口管理 (tao)   │    │  - 渲染 HTML/CSS/JS      │    │
│  │  - 系统 API 调用    │    │  - 执行前端框架          │    │
│  │  - 文件 I/O         │    │  - DOM 操作              │    │
│  │  - 子进程管理       │    │  - 前端状态管理          │    │
│  │  - Tauri 插件系统   │    │                          │    │
│  └─────────────────────┘    └──────────────────────────┘    │
│                                                             │
│  ┌──────────────────────────────────────────────────────┐   │
│  │               Sidecar 进程（可选）                     │   │
│  │  - 第三方二进制执行                                  │   │
│  │  - 隔离计算密集型任务                                │   │
│  └──────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

Core 进程（Rust 主进程）： 这是整个应用的"大脑"。Core 负责窗口生命周期管理（通过 tao 库）、系统能力暴露（文件系统、剪贴板、通知、托盘等）、进程间通信路由。它运行在 Rust 的安全沙箱中，每一个系统调用都经过显式的权限声明。

WebView 进程： 这是用户看到的界面层。它使用系统的原生 WebView——macOS 上用的是 WKWebView（Safari 的渲染引擎），Windows 上是 WebView2（Edge Chromium），Linux 上是 WebKitGTK，Android 上是 System WebView。关键区别：Tauri 不捆绑任何浏览器，完全依赖用户系统上已有的 WebView。这是包体从 120MB 降到 3-5MB 的根本原因。

Sidecar 进程（可选）： 对于需要运行第三方二进制文件或计算密集型任务（如视频编码、图像处理）的场景，Tauri 支持启动独立的子进程。这些进程与 Core 进程通过标准 IPC 通信，不会阻塞主线程或 WebView 渲染。

2.2 IPC 通信机制：从 invoke 到事件总线

Tauri 的 IPC 层是整个框架的核心基础设施。前端与 Rust 后端的通信通过精心设计的消息通道完成：

// Rust 端：定义一个命令（Command）
#[tauri::command]
fn encrypt_file(path: String, key: String) -> Result<String, String> {
    let contents = std::fs::read(&path).map_err(|e| e.to_string())?;
    // 使用 AES-256-GCM 加密
    use aes_gcm::{Aes256Gcm, Key, Nonce};
    use aes_gcm::aead::{Aead, KeyInit};
    
    let key_bytes = Key::<Aes256Gcm>::from_slice(key.as_bytes());
    let cipher = Aes256Gcm::new(key_bytes);
    let nonce = Nonce::from_slice(b"unique nonce"); // 生产环境使用随机 Nonce

    let ciphertext = cipher
        .encrypt(nonce, contents.as_ref())
        .map_err(|e| format!("加密失败: {}", e))?;

    let output_path = format!("{}.encrypted", path);
    std::fs::write(&output_path, &ciphertext).map_err(|e| e.to_string())?;
    Ok(format!("文件已加密保存至: {}", output_path))
}

// 前端 TypeScript 调用
import { invoke } from '@tauri-apps/api/core';

async function handleEncrypt() {
  try {
    const result = await invoke('encrypt_file', {
      path: '/Users/me/document.pdf',
      key: 'my-secret-key-32-bytes-long!!',
    });
    console.log(result); // "文件已加密保存至: /Users/me/document.pdf.encrypted"
  } catch (error) {
    console.error('加密失败:', error);
  }
}

序列化细节：Tauri IPC 使用 JSON 序列化前端参数，Rust 端的 tauri::command 宏自动实现从 JSON 到 Rust 类型的反序列化。默认集成了 serde 支持，复杂类型无需手动处理。

// 支持复杂类型
#[derive(serde::Serialize, serde::Deserialize)]
struct FileInfo {
    name: String,
    size: u64,
    is_dir: bool,
    created_at: String,
}

#[tauri::command]
fn list_files(path: String) -> Result<Vec<FileInfo>, String> {
    let entries = std::fs::read_dir(&path).map_err(|e| e.to_string())?;
    let mut files = Vec::new();
    for entry in entries {
        let entry = entry.map_err(|e| e.to_string())?;
        let metadata = entry.metadata().map_err(|e| e.to_string())?;
        files.push(FileInfo {
            name: entry.file_name().to_string_lossy().to_string(),
            size: metadata.len(),
            is_dir: metadata.is_dir(),
            created_at: format!("{:?}", metadata.created()),
        });
    }
    Ok(files)
}

2.3 WRY 与 WebView 抽象层

Tauri 不直接操作系统 WebView，而是通过 WRY（WebView Rendering librarY）这一抽象层。WRY 统一了不同平台的 WebView API，提供了跨平台一致的接口：

// WRY 底层抽象伪代码
use wry::WebViewBuilder;

// 在 Tauri 内部，Core 进程通过这种方式创建 WebView
let webview = WebViewBuilder::new(window)
    .with_url("tauri://localhost")  // Tauri 使用自定义协议，而非 HTTP
    .with_ipc_handler(|request| {
        // 处理来自前端的 IPC 调用
        let payload: String = request.body();
        // 路由到对应的 tauri::command
    })
    .with_navigation_handler(|url| {
        // 导航控制：白名单 URL、拦截外部链接
        if url.host_str() == Some("tauri") {
            return true; // 允许内部导航
        }
        // 打开外部链接用系统浏览器
        open::that(url.to_string()).ok();
        false
    })
    .build();

关键设计决策：Tauri 使用 tauri://localhost 自定义协议而非 http://localhost。这意味着：

1. 不需要启动本地 HTTP 服务器，减少了攻击面
2. 资源通过自定义协议流式传输，性能更好
3. 天然防止了来自本地网络的其他进程访问应用资源

三、开发环境搭建与项目初始化

3.1 系统依赖安装

Tauri 的系统依赖因平台而异，这里给出完整的安装步骤：

# macOS
xcode-select --install
# 确认 Rust 已安装
rustc --version && cargo --version

# 安装系统依赖（ARM Mac 不需要额外配置）
# WKWebView 预装在 macOS 中

# Windows (使用 PowerShell 管理员模式)
# 安装 WebView2（Windows 11 预装，Windows 10 需手动）
# 安装 Microsoft Visual Studio Build Tools，勾选 "Desktop development with C++"
# 或者使用 winget:
winget install Microsoft.VisualStudio.2022.BuildTools

# Linux (Ubuntu/Debian)
sudo apt update
sudo apt install libwebkit2gtk-4.1-dev \
  build-essential \
  curl \
  wget \
  file \
  libxdo-dev \
  libssl-dev \
  libayatana-appindicator3-dev \
  librsvg2-dev

3.2 创建第一个 Tauri 项目

# 使用 create-tauri-app 脚手架
npm create tauri-app@latest my-tauri-app

# 交互式配置：
# 1. 选择前端框架（React / Vue / Svelte / Solid / Preact / Vanilla）
# 2. 选择包管理器（npm / pnpm / yarn / bun）
# 3. 是否启用 TypeScript

# 进入项目并启动开发
cd my-tauri-app
npm install
npm run tauri dev

执行 npm run tauri dev 后，你会看到：

1. Cargo 编译 Rust 后端（首次编译较慢，后续增量编译很快）
2. 前端开发服务器启动（默认 1420 端口，可配置）
3. 原生窗口弹出，WebView 加载前端页面
4. Rust 后端与前端的 IPC 连接建立完成

3.3 项目结构解读

my-tauri-app/
├── src/                    # 前端源码
│   ├── App.tsx
│   ├── App.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── src-tauri/              # Rust 后端
│   ├── Cargo.toml          # Rust 依赖管理
│   ├── tauri.conf.json     # Tauri 配置文件
│   ├── capabilities/       # 安全权限声明
│   │   └── default.json
│   ├── src/
│   │   ├── main.rs         # 程序入口
│   │   └── lib.rs          # 核心逻辑
│   ├── icons/              # 应用图标
│   └── build.rs            # 构建脚本
├── package.json
├── vite.config.ts
├── tsconfig.json
└── index.html

tauri.conf.json 核心配置：

{
  "$schema": "https://raw.githubusercontent.com/tauri-apps/tauri/dev/crates/tauri-config-schema/schema.json",
  "productName": "My Tauri App",
  "version": "0.1.0",
  "identifier": "com.example.myapp",
  "build": {
    "frontendDist": "../dist",
    "devUrl": "http://localhost:1420",
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build"
  },
  "app": {
    "windows": [
      {
        "title": "My Tauri App",
        "width": 1200,
        "height": 800,
        "minWidth": 800,
        "minHeight": 600,
        "resizable": true,
        "fullscreen": false,
        "decorations": true,
        "transparent": false
      }
    ],
    "security": {
      "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost; style-src 'self' 'unsafe-inline'"
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": ["icons/32x32.png", "icons/128x128.png", "icons/icon.icns", "icons/icon.ico"]
  }
}

四、深入实战：构建一个 Markdown 编辑器

理论说够了，我们来做一个真正的项目——一个功能完整的 Markdown 编辑器。这个项目会涵盖 Tauri 2.0 的核心能力：文件 I/O、系统菜单、原生对话框、自动更新。

4.1 Rust 后端实现

// src-tauri/src/lib.rs
use serde::{Deserialize, Serialize};
use std::fs;
use std::path::PathBuf;
use tauri::Manager;

#[derive(Debug, Serialize, Deserialize)]
struct MarkdownFile {
    path: String,
    content: String,
    last_modified: String,
}

#[derive(Debug, Serialize, Deserialize)]
struct SearchResult {
    line: usize,
    column: usize,
    content: String,
}

// 打开文件
#[tauri::command]
fn open_file(path: String) -> Result<MarkdownFile, String> {
    let p = PathBuf::from(&path);
    if !p.exists() {
        return Err("文件不存在".into());
    }
    
    let content = fs::read_to_string(&path).map_err(|e| e.to_string())?;
    let metadata = fs::metadata(&path).map_err(|e| e.to_string())?;
    let modified = metadata
        .modified()
        .map(|t| format!("{:?}", t))
        .unwrap_or_default();

    Ok(MarkdownFile {
        path,
        content,
        last_modified: modified,
    })
}

// 保存文件
#[tauri::command]
fn save_file(path: String, content: String) -> Result<String, String> {
    fs::write(&path, &content).map_err(|e| e.to_string())?;
    Ok(path)
}

// 导出为 HTML
#[tauri::command]
fn export_html(markdown: String) -> Result<String, String> {
    // 使用 pulldown_cmark 转换 Markdown 为 HTML
    use pulldown_cmark::{Parser, html};
    
    let parser = Parser::new(&markdown);
    let mut html_output = String::new();
    html::push_html(&mut html_output, parser);
    
    // 包装完整 HTML
    let full_html = format!(
        r#"<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {{ font-family: -apple-system, sans-serif; max-width: 800px; margin: 0 auto; padding: 1em; }}
code {{ background: #f4f4f4; padding: 2px 4px; border-radius: 3px; }}
pre code {{ display: block; padding: 1em; overflow-x: auto; }}
table {{ border-collapse: collapse; width: 100%; }}
th, td {{ border: 1px solid #ddd; padding: 8px; }}
blockquote {{ border-left: 4px solid #ddd; margin-left: 0; padding-left: 1em; }}
</style>
</head>
<body>
{}
</body>
</html>"#,
        html_output
    );
    
    Ok(full_html)
}

// 全文搜索（在打开的文档中检索关键词）
#[tauri::command]
fn search_in_content(content: String, keyword: String) -> Vec<SearchResult> {
    let mut results = Vec::new();
    for (line_num, line) in content.lines().enumerate() {
        if let Some(col) = line.find(&keyword) {
            results.push(SearchResult {
                line: line_num + 1,
                column: col + 1,
                content: line.to_string(),
            });
        }
    }
    results
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_dialog::init())  // 原生文件对话框
        .plugin(tauri_plugin_fs::init())       // 文件系统访问
        .plugin(tauri_plugin_shell::init())    // 侧车进程
        .plugin(tauri_plugin_updater::Builder::new()
            .build())                          // 自动更新
        .setup(|app| {
            // 创建应用菜单
            #[cfg(desktop)]
            {
                use tauri::menu::*;
                let menu = MenuBuilder::new(app)
                    .item(&SubmenuBuilder::new(app, "File")
                        .text("open-file", "Open...\tCmdOrCtrl+O")
                        .text("save-file", "Save\tCmdOrCtrl+S")
                        .separator()
                        .text("export-html", "Export HTML...\tCmdOrCtrl+Shift+E")
                        .separator()
                        .quit()
                        .build()?)
                    .item(&SubmenuBuilder::new(app, "Edit")
                        .undo()
                        .redo()
                        .separator()
                        .cut()
                        .copy()
                        .paste()
                        .select_all()
                        .build()?)
                    .item(&SubmenuBuilder::new(app, "View")
                        .text("toggle-preview", "Toggle Preview\tCmdOrCtrl+Shift+P")
                        .separator()
                        .text("toggle-dark-mode", "Toggle Dark Mode\tCmdOrCtrl+Shift+D")
                        .build()?)
                    .build()?;
                app.set_menu(menu)?;
            }
            Ok(())
        })
        .invoke_handler(tauri::generate_handler![
            open_file,
            save_file,
            export_html,
            search_in_content,
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

4.2 前端界面实现

// src/App.tsx
import { useState, useEffect, useCallback } from 'react';
import { invoke } from '@tauri-apps/api/core';
import { open, save } from '@tauri-apps/plugin-dialog';
import { listen } from '@tauri-apps/api/event';
import ReactMarkdown from 'react-markdown';
import './App.css';

interface MarkdownFile {
  path: string;
  content: string;
  last_modified: string;
}

interface SearchResult {
  line: number;
  column: number;
  content: string;
}

function App() {
  const [currentFile, setCurrentFile] = useState<MarkdownFile | null>(null);
  const [content, setContent] = useState('');
  const [showPreview, setShowPreview] = useState(true);
  const [darkMode, setDarkMode] = useState(false);
  const [searchKeyword, setSearchKeyword] = useState('');
  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
  const [isDirty, setIsDirty] = useState(false);

  // 监听菜单事件
  useEffect(() => {
    const unlisteners = [
      listen('menu-event', (event) => {
        const payload = event.payload as { id: string };
        switch (payload.id) {
          case 'open-file':
            handleOpen();
            break;
          case 'save-file':
            handleSave();
            break;
          case 'export-html':
            handleExportHTML();
            break;
          case 'toggle-preview':
            setShowPreview((prev) => !prev);
            break;
          case 'toggle-dark-mode':
            setDarkMode((prev) => !prev);
            break;
        }
      }),
    ];
    return () => { unlisteners.forEach((u) => u.then((f) => f())); };
  }, [currentFile, content]);

  const handleOpen = useCallback(async () => {
    try {
      const selected = await open({
        multiple: false,
        filters: [{ name: 'Markdown', extensions: ['md', 'markdown'] }],
      });
      if (selected) {
        const file = await invoke<MarkdownFile>('open_file', {
          path: selected,
        });
        setCurrentFile(file);
        setContent(file.content);
        setIsDirty(false);
      }
    } catch (err) {
      console.error('打开文件失败:', err);
    }
  }, []);

  const handleSave = useCallback(async () => {
    try {
      if (currentFile) {
        await invoke('save_file', {
          path: currentFile.path,
          content,
        });
        setIsDirty(false);
      } else {
        // 第一次保存，弹出文件对话框
        const filePath = await save({
          filters: [{ name: 'Markdown', extensions: ['md'] }],
          defaultPath: 'untitled.md',
        });
        if (filePath) {
          await invoke('save_file', { path: filePath, content });
          setCurrentFile({ path: filePath, content, last_modified: '' });
          setIsDirty(false);
        }
      }
    } catch (err) {
      console.error('保存失败:', err);
    }
  }, [currentFile, content]);

  const handleExportHTML = useCallback(async () => {
    try {
      const html = await invoke<string>('export_html', { markdown: content });
      const filePath = await save({
        filters: [{ name: 'HTML', extensions: ['html'] }],
        defaultPath: 'export.html',
      });
      if (filePath) {
        await invoke('save_file', { path: filePath, content: html });
      }
    } catch (err) {
      console.error('导出失败:', err);
    }
  }, [content]);

  // 搜索功能
  useEffect(() => {
    if (searchKeyword.trim()) {
      invoke<SearchResult[]>('search_in_content', {
        content,
        keyword: searchKeyword,
      }).then(setSearchResults);
    } else {
      setSearchResults([]);
    }
  }, [searchKeyword, content]);

  // 统计信息
  const wordCount = content.replace(/\s/g, '').length;
  const charCount = content.length;
  const lineCount = content.split('\n').length;

  return (
    <div className={`app ${darkMode ? 'dark' : ''}`}>
      <div className="toolbar">
        <span className="file-info">
          {currentFile ? currentFile.path : '未打开文件'}
          {isDirty && <span className="dirty"> * 未保存</span>}
        </span>
        <div className="toolbar-actions">
          <button onClick={handleOpen}>📂 打开</button>
          <button onClick={handleSave}>💾 保存</button>
          <button onClick={handleExportHTML}>🌐 导出 HTML</button>
          <button onClick={() => setShowPreview(!showPreview)}>
            {showPreview ? '✏️ 编辑' : '👁️ 预览'}
          </button>
          <button onClick={() => setDarkMode(!darkMode)}>
            {darkMode ? '☀️' : '🌙'}
          </button>
        </div>
      </div>

      <div className="search-bar">
        <input
          type="text"
          placeholder="搜索..."
          value={searchKeyword}
          onChange={(e) => setSearchKeyword(e.target.value)}
        />
        {searchResults.length > 0 && (
          <span className="search-count">
            找到 {searchResults.length} 处
          </span>
        )}
      </div>

      <div className="editor-container">
        <textarea
          className="editor"
          value={content}
          onChange={(e) => {
            setContent(e.target.value);
            setIsDirty(true);
          }}
          placeholder="在此输入 Markdown..."
          spellCheck={false}
        />
        {showPreview && (
          <div className="preview">
            <ReactMarkdown>{content}</ReactMarkdown>
          </div>
        )}
      </div>

      <div className="status-bar">
        <span>字数: {wordCount}</span>
        <span>字符: {charCount}</span>
        <span>行数: {lineCount}</span>
        <span>{currentFile ? `最后修改: ${currentFile.last_modified}` : ''}</span>
      </div>
    </div>
  );
}

export default App;

/* src/App.css */
:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --toolbar-bg: #f5f5f5;
  --border: #e0e0e0;
  --accent: #0066cc;
}

.dark {
  --bg: #1e1e1e;
  --fg: #d4d4d4;
  --toolbar-bg: #252526;
  --border: #333333;
  --accent: #569cd6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg);
  color: var(--fg);
  transition: all 0.2s ease;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border);
  user-select: none;
  -webkit-user-select: none;
}

.toolbar button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
  font-size: 13px;
}

.toolbar button:hover {
  background: var(--accent);
  color: #fff;
}

.file-info { font-size: 13px; opacity: 0.7; }
.dirty { color: #e74c3c; font-weight: bold; }

.search-bar {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

.search-bar input {
  flex: 1;
  max-width: 300px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: 4px;
}

.editor-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.editor {
  flex: 1;
  padding: 16px;
  border: none;
  background: var(--bg);
  color: var(--fg);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  outline: none;
  tab-size: 2;
}

.preview {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  border-left: 1px solid var(--border);
}

.preview h1 { font-size: 1.8em; margin: 0.5em 0; }
.preview h2 { font-size: 1.5em; margin: 0.4em 0; }
.preview p { margin: 0.5em 0; line-height: 1.6; }
.preview code {
  background: var(--toolbar-bg);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}
.preview pre { margin: 1em 0; }
.preview pre code {
  display: block;
  padding: 1em;
  overflow-x: auto;
  line-height: 1.5;
}

.status-bar {
  display: flex;
  gap: 16px;
  padding: 4px 16px;
  background: var(--toolbar-bg);
  border-top: 1px solid var(--border);
  font-size: 12px;
  opacity: 0.6;
}

4.3 安全权限配置

Tauri 2.0 引入了更精细的权限系统，所有系统能力必须在前端通过 Capability 声明：

// src-tauri/capabilities/default.json
{
  "identifier": "default",
  "description": "默认权限集合",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "dialog:default",
    "dialog:allow-open",
    "dialog:allow-save",
    "fs:default",
    "fs:allow-read",
    "fs:allow-write",
    "shell:default",
    "updater:default",
    "updater:allow-check",
    "updater:allow-download-and-install",
    {
      "identifier": "fs:scope",
      "allow": [
        { "path": "$HOME/Documents/**" },
        { "path": "$DOWNLOAD/**" },
        { "path": "$DESKTOP/**" }
      ]
    }
  ]
}

五、移动端支持：iOS 与 Android

5.1 移动端架构差异

Tauri 2.0 最令人兴奋的特性是原生移动端支持。与桌面不同，移动端有独特的限制：

• iOS：所有 WebView 内容必须在 WKWebView 中运行，不支持自定义协议（tauri://localhost），所以 Tauri 在 iOS 上退回到使用本地 HTTP 服务器（127.0.0.1:PORT）
• Android：使用 Android System WebView，同样需要本地 HTTP 服务器模式
• 移动端 Core 进程同样使用 Rust，通过 JNI（Android）或 ffi（iOS）与系统层交互

5.2 移动端构建配置

# 添加移动端目标
rustup target add aarch64-apple-ios         # iOS 真机
rustup target add aarch64-apple-ios-sim     # iOS 模拟器
rustup target add aarch64-linux-android     # Android ARM64
rustup target add armv7-linux-androideabi   # Android ARM32

# Android 还需要 NDK
# 通过 Android Studio → SDK Manager → SDK Tools 安装 NDK

# 构建 iOS 应用
npm run tauri ios build

# 构建 Android 应用
npm run tauri android build

移动端适配需要考虑的要点：

// 平台检测与响应式适配
import { getCurrentWebview } from '@tauri-apps/api/webview';

async function checkPlatform() {
  const webview = getCurrentWebview();
  const label = webview.label;
  
  if (label === 'main') {
    // 桌面端完整 UI
    return 'desktop';
  } else {
    // 通过 userAgent 判断
    const ua = navigator.userAgent;
    if (/iPhone|iPad|iPod/.test(ua)) return 'ios';
    if (/Android/.test(ua)) return 'android';
    return 'desktop';
  }
}

// 移动端手势支持
import { onOpenUrl } from '@tauri-apps/plugin-deep-link';

// 监听深度链接（打开特定文件）
await onOpenUrl((urls) => {
  for (const url of urls) {
    if (url.startsWith('tauri-markdown://')) {
      const path = url.replace('tauri-markdown://', '');
      openFileByPath(decodeURIComponent(path));
    }
  }
});

六、性能优化终极指南

6.1 构建体积优化

这是 Tauri 相对 Electron 的最大优势，但仍可在 Rust 层面进一步优化：

# Cargo.toml 优化配置
[profile.release]
# 优化级别：z 侧重体积，3 侧重性能
opt-level = "z"       # 优化体积
lto = true            # 链接时优化，显著减小体积
codegen-units = 1     # 单代码生成单元，开启更多优化机会
strip = true          # 剥离调试符号
panic = "abort"       # panic 直接终止，不展开栈（减小体积）

# 在 Cargo.toml 的 [dependencies] 中
# 避免全功能引入，按需选 feature
tauri = { version = "2", features = ["tray-icon", "notification"] }
# 而非默认所有功能

实际对比（一个包含 React 前端 + 文件操作 + Markdown 渲染的 Tauri 应用）：

6.2 内存优化策略

// Rust 后端中，避免不必要的克隆
#[tauri::command]
fn process_large_file(path: String) -> Result<(), String> {
    // ❌ 反模式：将整个文件读入内存
    // let content = std::fs::read_to_string(&path).map_err(|e| e.to_string())?;
    // process_line_by_line(content);
    
    // ✅ 正确：流式处理
    use std::io::{BufRead, BufReader};
    let file = std::fs::File::open(&path).map_err(|e| e.to_string())?;
    let reader = BufReader::new(file);
    
    for (line_num, line) in reader.lines().enumerate() {
        let line = line.map_err(|e| e.to_string())?;
        // 逐行处理，内存占用 O(1)
        process_line(line_num + 1, &line);
    }
    Ok(())
}

6.3 前端性能优化

// 使用 Web Worker 处理重型任务
// 注意：Tauri 的 IPC 在 Web Worker 中也可用！
const worker = new Worker(
  new URL('./md-worker.ts', import.meta.url),
  { type: 'module' }
);

// 主线程 → Worker 发送任务
worker.postMessage({ type: 'compile', content: longMarkdown });

// Worker 接收结果
worker.onmessage = (event) => {
  const { html } = event.data;
  setCompiledHtml(html);
};

// md-worker.ts
// 在 Web Worker 中运行的高亮/编译逻辑
self.onmessage = async (event) => {
  const { type, content } = event.data;
  
  if (type === 'compile') {
    // 在 Worker 中执行 Markdown 编译，不阻塞 UI 渲染
    const tokens = tokenize(content);
    const html = renderTokens(tokens);
    self.postMessage({ html });
  }
};

七、插件生态与扩展

Tauri 2.0 拥有活跃的插件生态，几乎所有系统能力都通过插件暴露：

自定义插件开发示例：

// 创建一个简单的系统信息插件
use tauri::{
    plugin::{Builder, TauriPlugin},
    Runtime,
};

#[tauri::command]
fn get_cpu_usage() -> Result<f32, String> {
    // 跨平台 CPU 使用率获取
    #[cfg(target_os = "macos")]
    {
        let output = std::process::Command::new("top")
            .args(["-l", "1", "-n", "0", "-stats", "cpu"])
            .output()
            .map_err(|e| e.to_string())?;
        let output_str = String::from_utf8_lossy(&output.stdout);
        // 解析输出获取 CPU 使用率...
        Ok(45.2) // 示例值
    }
    
    #[cfg(target_os = "linux")]
    {
        let contents = std::fs::read_to_string("/proc/stat")
            .map_err(|e| e.to_string())?;
        // 解析 /proc/stat 获取 CPU 使用率...
        Ok(38.7)
    }
    
    #[cfg(target_os = "windows")]
    {
        // 使用 WinAPI 或 wmic
        Ok(52.1)
    }
}

pub fn init<R: Runtime>() -> TauriPlugin<R> {
    Builder::new("system-info")
        .invoke_handler(tauri::generate_handler![get_cpu_usage])
        .build()
}

八、生产部署与自动更新

8.1 应用打包

# 构建前端并打包
npm run tauri build

# 产物位置
# macOS: src-tauri/target/release/bundle/dmg/应用名.dmg
#         src-tauri/target/release/bundle/macos/应用名.app
# Windows: src-tauri/target/release/bundle/msi/应用名.msi
#           src-tauri/target/release/bundle/nsis/应用名.exe
# Linux: src-tauri/target/release/bundle/deb/应用名.deb
#         src-tauri/target/release/bundle/appimage/应用名.AppImage
# iOS: src-tauri/gen/apple/build/Release/应用名.app
# Android: src-tauri/gen/android/app/build/outputs/apk/

8.2 自动更新服务器配置

// tauri.conf.json 更新配置
{
  "plugins": {
    "updater": {
      "endpoints": [
        "https://update.example.com/api/check/{target}/{arch}/{current_version}"
      ],
      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IHJlbGVhc2U...请替换为真实公钥"
    }
  }
}

// Rust 端检查更新
#[tauri::command]
async fn check_for_updates(app: tauri::AppHandle) -> Result<String, String> {
    let updater = app.updater();
    match updater.check().await {
        Ok(update) => {
            if update.is_update_available() {
                let version = update.latest_version();
                update.download_and_install().await.map_err(|e| e.to_string())?;
                Ok(format!("已更新至版本 {}", version))
            } else {
                Ok("当前已是最新版本".into())
            }
        }
        Err(e) => Err(format!("检查更新失败: {}", e)),
    }
}

8.3 CI/CD 流水线

# .github/workflows/build.yml
name: Build and Release
on:
  push:
    tags:
      - 'v*'

jobs:
  build:
    strategy:
      matrix:
        platform: [macos-latest, windows-latest, ubuntu-latest]
    runs-on: ${{ matrix.platform }}
    
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Rust
        uses: dtolnay/rust-toolchain@stable
        
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'pnpm'
          
      - name: Install dependencies
        run: pnpm install
        
      - name: Install Linux dependencies
        if: matrix.platform == 'ubuntu-latest'
        run: |
          sudo apt-get update
          sudo apt-get install -y libwebkit2gtk-4.1-dev libayatana-appindicator3-dev
          
      - name: Build
        run: npm run tauri build
        
      - name: Upload artifacts
        uses: actions/upload-artifact@v4
        with:
          name: ${{ matrix.platform }}
          path: src-tauri/target/release/bundle/

九、Tauri vs Electron：选型决策指南

没有银弹，Tauri 也不是万能的。这里给出客观的选型建议：

适合 Tauri 的场景

1. 包体敏感：用户需要快速下载安装，原始大小很重要
2. 内存受限：目标设备内存有限，如办公电脑、老旧机器
3. 安全敏感：需要严格的 CSP、防止 XSS 提升为 RCE
4. 原生集成：频繁调用系统 API（文件系统、进程管理、蓝牙等）
5. Rust 生态：项目中已有 Rust 代码或需要性能关键组件

仍然适合 Electron 的场景

1. 现有 Electron 项目：迁移成本高，除非有明显收益否则维持现状
2. Chromium 特有 API：如 Chrome DevTools Protocol、Service Worker 持久化
3. 复杂 WebGL/Canvas 渲染：系统 WebView 的 GPU 加速能力差异大（尤其是 Linux）
4. Windows 7 以下支持：Tauri 需要 WebView2，Windows 7 需手动安装
5. WebRTC 屏幕共享：系统 WebView 对 WebRTC 的支持参差不齐

未来展望

Tauri 目前最欠缺的是生态成熟度。Electron 有将近 15 年的社区积累，npm 上有成千上万的 Electron 专用包。Tauri 正在快速追赶，2026 年 tauri-cli v2.8.x 显示了明确的迭代节奏。以下几个方向值得关注：

1. 移动端成熟度提升：iOS/Android 的 WebView 差异、热更新、原生 UI 混编
2. 插件生态爆发：社区正在将 Electron 的常用功能移植为 Tauri 插件
3. WebView 解耦：未来可能支持自定义 WebView 引擎，不再依赖系统版本
4. Deno/Bun 运行时：Rust 后端的灵活性让替换 JavaScript 运行时成为可能

十、总结

Tauri 2.0 在 2026 年已经不再是"Electron 的替代品"，而是一个独立的、有自己哲学的应用框架。它的核心承诺——用 5% 的包体、20% 的内存消耗、提供同等的用户体验——正在越来越多的生产应用中验证。

对于今年的前端开发者来说，Tauri 是值得认真投入的技能。它用 Rust 的严谨弥补了 Web 开发的不可靠，用系统 WebView 的轻量解决了捆绑浏览器的臃肿，用一个框架的统一抽象实现了真正的跨平台。

如果你还没有尝试过 Tauri，就从今天开始：

npm create tauri-app@latest my-first-tauri-app
cd my-first-tauri-app
npm install
npm run tauri dev

从 120MB 到 3MB，改变的不仅是数字，而是一种更优雅的工程选择。

参考资源：

• Tauri 官方文档
• Tauri GitHub
• Awesome Tauri
• Tauri Discord 社区