前端工程师不会 Rust没关系。本文以 WATools 项目为例手把手教你如何在 Vue 3 前端项目中引入 Rust 后端实现前后端混合开发。为什么要混合开发传统前端项目React/Vue所有逻辑都跑在浏览器里但有些场景下你会感到力不从心计算密集型任务大文件哈希、复杂数据解析JS 性能不够文件系统操作读写本地文件、访问 SQLite 数据库安全敏感操作加密解密、签名验证不想把逻辑暴露在浏览器Rust 恰好弥补了这些短板——高性能、内存安全、强大的 crate 生态。Tauri 2 把两者优雅地连接在一起。混合开发的架构图第一步环境准备# 安装 Rust curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh # 安装 Node.js 和 pnpm # https://nodejs.org/ npm install -g pnpm # 创建 Tauri 项目 pnpm create tauri-app第二步规划命令目录建议将每个 Rust 命令放在独立的文件中便于维护src-tauri/src/ ├── commands/ │ ├── mod.rs # 模块声明 │ ├── json_format.rs # JSON 格式化命令 │ ├── jwt_parse.rs # JWT 解析命令 │ └── time_convert.rs # 时间转换命令 ├── lib.rs # 应用入口注册命令 └── main.rs # 程序入口mod.rs 模块声明// src-tauri/src/commands/mod.rs pub mod json_format; pub mod jwt_parse; pub mod time_convert;第三步编写 Rust 命令每个命令文件遵循统一模式// src-tauri/src/commands/time_convert.rs use chrono::{DateTime, Utc, TimeZone}; use serde::{Deserialize, Serialize}; #[derive(Serialize)] pub struct TimeResult { pub timestamp: i64, pub iso: String, pub local: String, } #[tauri::command] pub fn convert_timestamp(timestamp: i64) - ResultTimeResult, String { let dt Utc.timestamp_opt(timestamp, 0) .single() .ok_or(无效的时间戳)?; Ok(TimeResult { timestamp, iso: dt.to_rfc3339(), local: dt.format(%Y-%m-%d %H:%M:%S).to_string(), }) }关键要点返回ResultT, StringTauri 会自动将Err转为前端错误使用Serialize派生宏Rust 结构体自动转为 JSON用#[tauri::command]标注函数第四步注册命令// src-tauri/src/lib.rs mod commands; #[cfg_attr(mobile, tauri::mobile_entry_point)] pub fn run() { tauri::Builder::default() .plugin(tauri_plugin_sql::Builder::new().build()) .plugin(tauri_plugin_shell::init()) .invoke_handler(tauri::generate_handler![ commands::json_format::format_json, commands::json_format::compress_json, commands::jwt_parse::jwt_parse, commands::time_convert::convert_timestamp, commands::time_convert::convert_date_string, ]) .run(tauri::generate_context!()) .expect(error while running tauri application); }第五步前端调用封装 Composable推荐将invoke调用封装为 Vue 的组合式函数// src/composables/useTimeConversion.ts import { invoke } from tauri-apps/api/core import { ref } from vue interface TimeResult { timestamp: number iso: string local: string } export function useTimeConversion() { const result refTimeResult | null(null) const error refstring | null(null) const loading ref(false) async function convertTimestamp(timestamp: number) { loading.value true error.value null try { result.value await invokeTimeResult( convert_timestamp, { timestamp } ) } catch (e) { error.value e as string } finally { loading.value false } } return { result, error, loading, convertTimestamp } }在组件中使用script setup langts import { useTimeConversion } from /composables/useTimeConversion const { result, error, loading, convertTimestamp } useTimeConversion() /script template div neu-button clickconvertTimestamp(1700000000) :loadingloading 转换 /neu-button result-card v-ifresult :dataresult / div v-iferror classerror{{ error }}/div /div /template数据传递规则前端TypeScript后端RuststringStringnumberi64/f64booleanboolobjectHashMap/struct需DeserializearrayVecTPromiseT返回值T开发调试技巧Rust 编译错误首次编译较慢后续增量编译很快。cargo check可以快速检查语法热重载前端修改 Vite 会自动热重载Rust 修改需要重新编译日志调试Rust 端用println!()输出会显示在终端前端用console.log()可在 DevTools 查看DevTools开发模式下按F12可以打开浏览器开发者工具添加新工具的标准流程当你在 WATools 中新增一个工具时只需四步Rust 命令src-tauri/src/commands/xxx.rs中实现业务逻辑注册命令在lib.rs的invoke_handler中添加前端 Composablesrc/composables/useXxx.ts中封装调用Vue 页面src/views/tools/XxxView.vue中构建 UI然后在路由中注册页面即可。总结Rust 前端混合开发并不复杂前端工程师不需要精通 Rust只需会写#[tauri::command]函数Rust 工程师不需要学 Vue只需提供干净的命令接口Tauri 2负责把两者桥接起来IPC 通信透明高效WATools 的源码就是一个完整的参考实现来 GitCode Star 一下开始你的混合开发之旅