一、Tauri 框架核心概述1.1 什么是 TauriTauri 是一款基于 Rust 后端 前端 Web 技术的轻量级跨平台桌面应用开发框架支持 Windows、macOS、Linux 三大主流桌面系统同时兼容移动端编译。开发者可以使用 Vue、React、Svelte 等任意前端框架编写界面通过 Rust 实现底层逻辑、系统调用、性能计算最终打包生成体积极小、安全性极高的桌面客户端。不同于传统 Electron 框架Tauri 最大的核心优势是不内置浏览器内核而是直接调用系统原生 WebView 渲染页面彻底解决了 Electron 应用体积臃肿、内存占用高、启动速度慢的痛点。1.2 Tauri vs Electron 核心对比为了让大家直观理解 Tauri 的优势这里整理了两款主流桌面框架的核心差异也是目前开发者首选 Tauri 的核心原因安装包体积Electron 空项目约 100MBTauri 空项目仅 2-5MB压缩后体积更小内存占用Electron 启动常驻内存 100MBTauri 基础内存占用不足 20MB安全性能Tauri 基于 Rust 内存安全机制默认权限隔离可精细化控制系统调用Electron 权限宽泛漏洞风险更高启动速度Tauri 毫秒级启动Electron 普遍存在数百毫秒启动延迟底层性能Tauri 核心逻辑由 Rust 编写支持高性能并发、文件处理、硬件调用远超 Node.js 底层的 Electron1.3 适用开发场景Tauri 并非替代所有桌面开发方案其最佳适用场景如下需要轻量、快速启动的日常工具类桌面软件需要底层高性能计算、文件批量处理、系统权限调用的应用跨平台统一迭代不想维护多端原生代码的项目对软件安全性、内存占用有严格要求的企业级工具二、全平台开发环境搭建Tauri 开发依赖 Rust 编译环境、前端运行环境以及系统原生依赖以下是 Windows、macOS、Linux 通用搭建流程适配最新 Tauri 2.x 版本。2.1 基础依赖安装2.1.1 安装 RustRust 是 Tauri 的核心底层依赖必须优先安装官方推荐使用 rustup 工具链Windows / macOS / Linux 统一安装命令curl--protohttps--tlsv1.2-sSfhttps://sh.rustup.rs|shWindows 用户也可直接访问 Rust 官网 下载安装包。安装完成后执行以下命令验证是否安装成功并切换稳定工具链rustc--versioncargo--versionrustup default stable2.1.2 安装前端环境Tauri 依赖 Node.js 管理前端项目推荐安装 Node.js 18.x 及以上 LTS 版本安装完成后验证node-vnpm-v2.1.3 系统专属依赖Windows安装 Visual Studio 生成工具勾选「桌面开发使用 C」组件macOS安装 Xcode 命令行工具执行xcode\-select \-\-installLinux执行sudo apt install libwebkit2gtk\-4\.0\-dev build\-essential安装系统依赖2.2 安装 Tauri 脚手架通过 npm 全局安装 Tauri 官方脚手架用于快速创建项目npminstall-gtauri-apps/cli验证脚手架安装tauri--version三、创建第一个 Tauri 项目 amp; 目录解析3.1 初始化项目Tauri 支持搭配 Vue、React、Vanilla JS 等前端框架本文以Vue3 TypeScript为例最主流企业级方案# 创建项目npmcreate tauri-applatest tauri-demo# 按照提示选择配置# 1. 项目名称默认即可# 2. 前端框架Vue# 3. 语言TypeScript# 4. 是否启用 ESLint按需开启进入项目并安装依赖、启动开发环境cdtauri-demonpminstallnpmrun tauri dev执行成功后会自动编译 Rust 后端、启动前端服务最终弹出原生桌面窗口第一个 Tauri 应用运行成功。3.2 核心目录结构详解Tauri 项目分为前端层和后端 Rust 层两大模块核心目录如下tauri-demo/ ├── src/ # 前端 Vue 源码目录 ├── src-tauri/ # Tauri Rust 后端核心目录 │ ├── src/ │ │ ├── main.rs # 后端入口文件应用初始化逻辑 │ │ └── lib.rs # 核心命令、功能逻辑编写处 │ ├── tauri.conf.json # Tauri 全局配置文件权限、窗口、打包配置 │ └── Cargo.toml # Rust 依赖管理文件 ├── package.json # 前端脚本、依赖配置 └── vite.config.ts # 前端打包配置3.3 核心配置文件说明tauri.conf.json是 Tauri 项目的核心配置文件掌控应用所有核心能力常用配置项productName应用打包后的软件名称version应用版本号windows窗口尺寸、标题、无边框、置顶等配置allowlist系统权限白名单文件读写、弹窗、shell 调用等bundle打包配置图标、安装包格式、权限声明四、核心核心前后端双向通信实战代码Tauri 开发的核心逻辑是前端负责界面展示Rust 负责底层业务两者通过「命令调用 事件监听」实现双向通信这是 Tauri 开发的必备知识点。4.1 前端调用 Rust 函数核心Tauri CommandRust 端通过\#\[tauri::command\]宏定义可被前端调用的函数前端通过invokeAPI 异步调用支持参数传递、返回值接收。4.1.1 Rust 端编写命令修改src\-tauri/src/lib\.rs编写自定义业务命令包含传参、返回值、错误处理// 引入核心依赖usetauri::command;useserde::Serialize;// 定义可序列化结构体用于前后端结构化数据传输#[derive(Serialize)]#[serde(crate tauri::serde)]pubstructUserInfo{pubname:String,pubage:u32,pubmsg:String}/// 简单传参命令问候函数#[command]pubfngreet(name:str)-String{format!(Hello {}欢迎使用 Tauri 开发,name)}/// 结构化数据返回命令#[command]pubfnget_user_info(name:String,age:u32)-UserInfo{UserInfo{name:name.clone(),age,msg:format!(用户 {} 信息加载成功,name)}}/// 带错误返回的命令实战常用#[command]pubfncalc_num(a:i32,b:i32)-Resulti32,String{ifb0{returnErr(除数不能为0.to_string());}Ok(a/b)}// 应用入口配置#[cfg_attr(mobile, tauri::mobile_entry_point)]pubfnrun(){tauri::Builder::default()// 注册所有自定义命令.invoke_handler(tauri::generate_handler![greet,get_user_info,calc_num]).run(tauri::generate_context!()).expect(tauri 应用启动失败);}4.1.2 前端调用 Rust 命令修改前端src/App\.vue通过 Tauri 官方 API 调用后端函数处理返回结果与异常template div classdemo h3Tauri 前后端通信实战/h3 button clickhandleGreet调用简单问候接口/button p{{ greetText }}/p button clickhandleUserInfo获取结构化用户数据/button p{{ userText }}/p button clickhandleCalc执行除法计算异常测试/button p{{ calcText }}/p /div /template script setup langts import { ref } from vue; // 引入 tauri 调用核心 API import { invoke } from tauri-apps/api/core; // 定义响应式数据 const greetText ref(); const userText ref(); const calcText ref(); // 1. 调用简单传参 Rust 命令 const handleGreet async () { const res await invokestring(greet, { name: Tauri 开发者 }); greetText.value res; }; // 2. 获取结构化数据 const handleUserInfo async () { interface UserInfo { name: string; age: number; msg: string; } const res await invokeUserInfo(get_user_info, { name: 张三, age: 25 }); userText.value ${res.msg}姓名${res.name}年龄${res.age}; }; // 3. 异常捕获实战 const handleCalc async () { try { // 故意传参触发除数为0错误 const res await invokenumber(calc_num, { a: 10, b: 0 }); calcText.value 计算结果${res}; } catch (err) { calcText.value 计算失败${err}; } }; /script4.2 Rust 向前端推送事件反向通信实际开发中常需要 Rust 后端完成耗时操作后主动向前端推送数据如文件批量处理进度、后台任务状态Tauri 提供事件监听机制实现该能力。4.2.1 Rust 端发送事件在lib\.rs中新增耗时任务命令执行过程中向前端推送进度事件usestd::thread;usestd::time::Duration;usetauri::Window;/// 耗时任务向前端推送进度#[command]pubfnlong_task(window:Window){// 模拟 5 步耗时任务foriin1..5{// 向前端发送 progress 事件携带进度数据window.emit(task_progress,Some(format!(当前进度{}0%,i))).unwrap();// 模拟任务延迟thread::sleep(Duration::from_secs(1));}// 任务完成事件window.emit(task_finish,Some(任务执行完成)).unwrap();}同时在generate\_handler中注册该命令.invoke_handler(tauri::generate_handler![greet,get_user_info,calc_num,long_task])4.2.2 前端监听后端事件在App\.vue中添加事件监听逻辑实时接收后端推送数据template div classdemo button clickstartLongTask启动后端耗时任务/button p{{ taskProgress }}/p /div /template script setup langts import { ref, onMounted, onUnmounted } from vue; import { invoke, listen } from tauri-apps/api/core; const taskProgress ref(); // 存储事件监听器组件销毁时取消监听防止内存泄漏 let progressListener: AwaitedReturnTypetypeof listen | null null; // 挂载时注册事件监听 onMounted(async () { // 监听后端推送的进度事件 progressListener await listen(task_progress, (event) { taskProgress.value event.payload as string; }); // 监听任务完成事件 await listen(task_finish, (event) { taskProgress.value event.payload as string; }); }); // 启动后端耗时任务 const startLongTask async () { taskProgress.value 任务启动中...; await invoke(long_task); }; // 组件销毁时移除监听 onUnmounted(() { progressListener?.unlisten(); }); /script五、高频实战功能开发本节讲解 Tauri 项目中最常用的系统功能包含文件读写、系统弹窗、窗口自定义全部为企业级可直接复用代码。5.1 系统弹窗提示确认框、消息框Tauri 提供原生系统弹窗插件无需前端模拟体验更接近原生应用。首先开启权限修改tauri\.conf\.json{tauri:{allowlist:{dialog:{all:true}}}}前端调用弹窗 APIimport{message,confirm}fromtauri-apps/api/dialog;// 消息提示弹窗constshowMsgasync(){awaitmessage(操作成功,提示);};// 确认弹窗constshowConfirmasync(){constresawaitconfirm(确定要执行该操作吗,确认提示);if(res){awaitmessage(你点击了确定);}};5.2 本地文件读写功能文件操作是桌面工具核心能力Tauri 提供官方文件插件支持跨平台文件读写、创建、删除。第一步修改src\-tauri/Cargo\.toml引入文件插件依赖tauri-plugin-fs 2.0第二步在lib\.rs初始化插件pubfnrun(){tauri::Builder::default().plugin(tauri_plugin_fs::init())// 注册文件插件.invoke_handler(tauri::generate_handler![...]).run(tauri::generate_context!()).expect(应用启动失败);}第三步前端实现文件写入与读取import{writeTextFile,readTextFile,BaseDirectory}fromtauri-apps/api/fs;// 写入本地文件constwriteFileasync(){awaitwriteTextFile(test.txt,Hello Tauri 文件读写测试,{dir:BaseDirectory.Desktop}// 保存到桌面);awaitmessage(文件写入成功已保存到桌面);};// 读取本地文件constreadFileasync(){constcontentawaitreadTextFile(test.txt,{dir:BaseDirectory.Desktop});awaitmessage(文件内容${content});};5.3 自定义窗口样式无边框、置顶、尺寸通过tauri\.conf\.json可快速配置窗口原生属性实现自定义桌面窗口效果{tauri:{windows:[{title:Tauri 实战工具,width:800,height:600,resizable:true,alwaysOnTop:false,decorations:true,// 关闭则为无边框窗口transparent:false}]}}六、项目打包与跨平台发布Tauri 支持一键打包 Windows、macOS、Linux 安装包打包前可自定义软件图标、版本、版权信息。6.1 打包前置配置替换src\-tauri/icons目录下的默认图标支持 png/ico 格式修改tauri\.conf\.json中的productName、version、author信息6.2 执行打包命令# 开发环境调试打包npmrun tauri build--debug# 生产环境正式打包压缩优化npmrun tauri build打包完成后安装包会生成在src\-tauri/target/release/bundle目录下包含 exe 安装包、免安装绿色版、mac dmg、linux deb 等格式文件。七、进阶优化与避坑拓展7.1 权限精细化管理Tauri 默认关闭所有系统权限生产环境禁止开启 all:true 全局权限需按需开启提升软件安全性allowlist:{dialog:{open:true,message:true},fs:{readFile:true,writeFile:true},shell:{open:false}}7.2 性能优化技巧耗时任务后置 Rust所有文件处理、循环计算、网络请求耗时逻辑全部放在 Rust 端避免前端卡顿事件防抖处理高频推送的后端事件前端增加防抖逻辑避免页面频繁渲染打包压缩优化开启 Tauri 打包压缩移除无用调试代码进一步缩小包体积7.3 常见问题避坑开发环境报错优先检查 Rust 工具链、Node 版本是否匹配重新执行npm install修复依赖前后端参数报错确保 Rust 结构体添加\#\[serde\]序列化宏前后端参数类型严格对应打包失败检查系统依赖是否完整Windows 需确保安装 C 编译工具权限失效修改权限配置后需重启tauri dev环境才能生效八、总结本文完整讲解了 Tauri 框架从环境搭建、项目创建、前后端通信、常用功能开发到打包发布的全流程通过可直接复用的实战代码实现了轻量化跨平台桌面应用的基础开发能力。相比传统桌面开发方案Tauri 结合了 Web 快速开发的优势和 Rust 高性能、高安全的底层能力是目前轻量级跨平台桌面工具开发的最优解之一。后续进阶学习方向Tauri 插件开发、数据库集成、硬件设备调用、自动更新功能、多窗口管理、移动端适配编译等高级能力。