Rust+前端混合开发入门-Tauri2桥接实战-平芜编程栈

前端工程师不会 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) -> Result<TimeResult, 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(), }) }

关键要点：

返回Result<T, String>，Tauri 会自动将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 = ref<TimeResult | null>(null) const error = ref<string | null>(null) const loading = ref(false) async function convertTimestamp(timestamp: number) { loading.value = true error.value = null try { result.value = await invoke<TimeResult>( 'convert_timestamp', { timestamp } ) } catch (e) { error.value = e as string } finally { loading.value = false } } return { result, error, loading, convertTimestamp } }

在组件中使用

<script setup lang="ts"> import { useTimeConversion } from '@/composables/useTimeConversion' const { result, error, loading, convertTimestamp } = useTimeConversion() </script> <template> <div> <neu-button @click="convertTimestamp(1700000000)" :loading="loading"> 转换 </neu-button> <result-card v-if="result" :data="result" /> <div v-if="error" class="error">{{ error }}</div> </div> </template>

数据传递规则

前端（TypeScript）	后端（Rust）
`string`	`String`
`number`	`i64`/`f64`
`boolean`	`bool`
`object`	`HashMap`/`struct`（需`Deserialize`）
`array`	`Vec<T>`
`Promise<T>`	返回值`T`