Tauri 2 + Vue 3 实战:如何构建一个轻量级桌面应用 Electron 太重试试 Tauri 2用你熟悉的 Vue 3 写界面用 Rust 写后端打包出来不到 10MB。为什么选 Tauri 2 而不是 Electron对比项ElectronTauri 2安装包体积80MB3~10MB内存占用100MB20~40MB后端语言Node.jsRust安全模型Chromium 沙箱系统 WebView 权限白名单启动速度较慢极快如果你不需要 Chromium 的完整能力Tauri 2 在体积、性能和安全性上都有明显优势。项目架构WATools 的技术选型以我开发的WATools桌面工具箱为例整体架构如下前端负责 UI 交互后端负责计算密集型和数据安全相关的操作两者通过 Tauri 的 IPC进程间通信桥接。快速搭建一个 Tauri 2 Vue 3 项目1. 初始化项目pnpm create tauri-app # 选择 Vue TypeScript 模板2. 项目结构规划src/ # 前端代码 ├── components/ # UI 组件 ├── composables/ # 组合式函数 ├── views/ # 页面视图 ├── stores/ # Pinia 状态管理 └── router/ # Vue Router src-tauri/ # Rust 后端 ├── src/ │ ├── commands/ # Tauri 命令前端可调用 │ ├── lib.rs # 插件注册入口 │ └── main.rs # 应用启动入口 └── tauri.conf.json # Tauri 配置3. 编写第一个 Tauri 命令在 Rust 端定义一个命令// src-tauri/src/commands/json_format.rs #[tauri::command] pub fn format_json(input: String) - ResultString, String { let value: serde_json::Value serde_json::from_str(input) .map_err(|e| e.to_string())?; serde_json::to_string_pretty(value) .map_err(|e| e.to_string()) }在lib.rs中注册tauri::Builder::default() .invoke_handler(tauri::generate_handler![ commands::json_format::format_json ]) .run(tauri::generate_context!())4. 前端调用 Rust 命令import { invoke } from tauri-apps/api/core const result await invoke(format_json, { input: jsonString })就这么简单前端用invoke就能调用 Rust 函数享受原生性能。插件系统开箱即用的扩展能力Tauri 2 提供了丰富的官方插件WATools 使用了以下插件tauri-plugin-sqlSQLite 数据库支持用于存储历史记录tauri-plugin-shell系统 Shell 交互能力SQL 插件配置示例tauri.conf.json{ plugins: { sql: { preload: [sqlite:watools.db] } } }⚠️ 注意preload字段必须是字符串数组格式否则会导致应用启动 panic。多主题实现CSS 变量 动态切换WATools 通过 CSS 变量体系实现主题切换/* variables.css - 定义主题变量 */ :root { --neu-bg: #e0e5ec; --neu-shadow-dark: #a3b1c6; --neu-shadow-light: #ffffff; --neu-text: #4a5568; }切换主题时只需动态替换document.documentElement的样式表引用所有组件自动跟随变化。打包发布pnpm tauri buildTauri 会自动调用系统编译器生成平台原生安装包Windows.msi/.exemacOS.dmgLinux.deb/.AppImage总结Tauri 2 Vue 3 是目前构建轻量级桌面工具应用的最佳组合之一Vue 3提供优秀的开发体验和丰富的生态Rust 后端保证性能和安全Tauri 2把两者优雅地桥接在一起如果你也想做一个自己的桌面工具不妨从 WATools 的源码开始参考Star 一下支持开源