1. 从 224MB 到 4.7MB这个数字差距到底意味着什么先把结论摆在前面同样一个功能不算复杂的桌面应用用 Electron 打包出来 224MB换成 TauriRust 做后端 系统 WebView 做前端渲染之后压到 4.7MB这不是营销话术是我自己项目里实测出来的数字。差了将近 48 倍。这个差距不是靠压缩资源、删依赖抠出来的而是两种方案从根子上就不一样。Electron 的思路是把整个 Chromium 浏览器内核和 Node.js 运行时一起塞进你的安装包里不管用户系统上有没有我都自带一份。好处是行为绝对一致坏处是——你为了显示一个设置面板附带了一整个浏览器。Tauri 的思路完全反过来前端还是写 HTML/CSS/JS我用的是 Vue但渲染交给操作系统自带的 WebView后端逻辑用 Rust 编译成原生二进制。安装包里没有浏览器内核只有你的业务代码和一小坨 Rust 编译产物所以体积能掉一个数量级。这篇文章适合谁看如果你正在做跨平台桌面应用被 Electron 的包体、内存占用、启动速度折磨过或者你听说过 Tauri 但不确定它能不能扛住真实项目那这篇就是写给你的。我会把 6 种主流跨平台桌面方案摆在一起横评重点拆 Tauri Vue 这条链路从选型逻辑、环境搭建、核心实现、打包瘦身到踩坑排查全部给到可直接抄的细节。Rust 没写过、Vue 只会一点也能跟着走下来。需要先说明一点下面涉及的体积、内存、启动时间数据都来自我本机Windows 11 macOS 14 双平台对一个中等复杂度应用登录、列表、详情、本地存储、一个网络请求模块的实测不同项目会有浮动但量级关系是稳定的。2. 六种跨平台桌面方案横评先搞清楚你在选什么在动手之前得先把牌桌上的选项看清楚。跨平台桌面开发这些年沉淀下来的主流路线大致可以归成六类。我把它们的核心机制、典型体积、适用场景整理成一张表你可以直接对号入座。方案渲染机制后端语言典型空壳体积内存占用学习曲线最适合Electron自带 ChromiumNode.js150-250MB高低生态成熟、要绝对一致Tauri系统 WebViewRust3-10MB低中高追求体积与性能Qt (C/QML)自绘/原生控件C30-80MB中高工业级、重原生Flutter Desktop自绘 SkiaDart20-40MB中中移动桌面一套代码.NET MAUI原生控件C#40-90MB中中Windows 生态为主Wails系统 WebViewGo5-15MB低中会 Go、想轻量这张表里最值得对比的是 Electron 和 Tauri因为它们的前端开发体验几乎一样——都是写网页区别全在后端和运行时。Electron 把 Chromium 和 Node 打包进去等于给每个用户发了一台浏览器虚拟机Tauri 则假设用户系统已经有 WebViewWindows 上是 WebView2macOS 上是 WKWebViewLinux 上是 WebKitGTK只发业务代码。Qt 和 Flutter 走的是另一条路——自绘或原生控件不依赖 WebView所以体积和内存介于两者之间但前端不能用你熟悉的 Vue/React得学 QML 或 Dart。.NET MAUI 在 Windows 上很舒服跨到 macOS/Linux 就没那么顺。Wails 是 Go 版的 Tauri思路一致如果你团队是 Go 技术栈它比 Tauri 更顺手。我为什么最后押注 Tauri Vue三个理由。第一我的前端资产是现成的 Vue 项目迁移成本几乎为零Tauri 官方对 Vue 的支持非常成熟。第二体积和内存是硬指标我的用户里有不少是老机器224MB 的安装包和动辄 300MB 的内存占用是劝退级别的。第三Rust 后端给了我一个意外收获——那些原本要写 Node 原生模块才能干的活文件系统、进程管理、加密Rust 直接原生搞定还不用担心 ABI 兼容。提示选型不要只看体积。如果你的应用重度依赖 Chromium 特有的 API比如某些 WebRTC 高级特性、特定的媒体编解码系统 WebView 的兼容性会成为坑这时候 Electron 的自带内核反而是优势。体积小不是唯一目标能跑对才是。3. Tauri Vue 的核心机制为什么它能瘦这么多3.1 前端还是 Vue但渲染引擎换了人很多人一听 Tauri 就以为要重学一套 UI 框架其实不是。你的 Vue 代码、Vite 构建流程、组件库、路由、Pinia 状态管理全部照旧。Tauri 只是把你的前端产物dist 目录里的 HTML/CSS/JS当成静态资源交给系统 WebView 去渲染。也就是说你写的还是网页只是这个网页被装进了一个原生窗口里而不是 Chromium 窗口里。这个替换带来的连锁反应很关键。Chromium 内核压缩后也有 100MB 以上而系统 WebView 是操作系统自带的不占你的包体。Windows 上依赖 WebView2 RuntimeWin11 自带Win10 大多已通过更新安装macOS 上 WKWebView 是系统组件Linux 上需要 WebKitGTK。这就是体积从 224MB 掉到 4.7MB 的第一大来源。3.2 Rust 后端不是噱头是实打实的收益Tauri 的后端是 Rust 编译出的原生二进制。你在前端通过invoke调用 Rust 里用#[tauri::command]标注的函数数据通过序列化在两端传递。这套机制的好处有三个层面。性能层面Rust 没有 GC内存占用和启动延迟都可控。我实测冷启动Electron 版本约 1.8 秒Tauri 版本约 0.4 秒差距主要来自不用初始化整个 Chromium。安全层面Tauri 默认只暴露你显式声明的命令前端拿不到任意系统调用能力攻击面比 Node 集成小得多。能力层面文件读写、系统托盘、全局快捷键、自动更新、进程调用Tauri 都有官方插件不用再折腾 Node 原生模块编译。3.3 体积账本4.7MB 是怎么算出来的我把最终安装包的构成拆开给你看这样你就知道每一 MB 花在哪。Rust 编译产物release strip LTO约 2.8MB前端 dist 产物Vue 应用gzip 后约 1.2MB图标、配置、清单文件约 0.4MB安装器自身开销约 0.3MB合计约 4.7MB。对比 Electron 的 224MB其中 Chromium 内核就占了 150MB 以上Node 运行时 40MB 左右剩下才是你的代码。所以瘦身的本质不是优化而是不再打包你根本不需要的浏览器。注意4.7MB 是安装包体积不是运行时内存。Tauri 应用运行时内存通常在 30-80MB 区间取决于你的前端复杂度因为 WebView 本身也要占内存。但相比 Electron 动辄 200MB 的常驻依然是数量级的改善。4. 环境搭建与项目初始化从零到能跑4.1 Rust 环境安装与验证第一步是装 Rust。Windows 上直接去官网下载 rustup-init.exe一路默认即可它会帮你装好 rustc、cargo 和 MSVC 链接器需要 Visual Studio Build Tools安装器会提示。macOS/Linux 上一条命令curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh装完验证rustc --version cargo --version两个命令都能输出版本号就对了。这里有个新手常踩的坑Windows 上如果没装 MSVC 构建工具cargo build 会报 linker not found。解决办法是装 Visual Studio Build Tools勾选使用 C 的桌面开发。Rust 语言本身不用先学透再上手 Tauri。你只需要理解所有权、借用、生命周期这几个核心概念的大意剩下的边写边查。Tauri 命令函数的写法非常模板化照着官方示例改就行。真想系统入门把《Rust 程序设计语言》前 10 章过一遍足够应付大部分桌面开发场景。4.2 创建 Tauri Vue 项目官方脚手架最省事。确保 Node 18 和包管理器就绪然后npm create tauri-applatest交互式问答里选项目名随便起前端框架选 Vue包管理器选 npm或 pnpmTypeScript 看个人喜好。生成后进入目录cd your-app npm install npm run tauri dev第一次运行会触发 Rust 编译比较慢可能几分钟之后增量编译就快了。窗口弹出来那一刻说明链路通了。项目结构里你要重点关注两个地方。src-tauri/是 Rust 后端src-tauri/src/main.rs是入口src-tauri/tauri.conf.json是配置。src/是你的 Vue 前端和平时的 Vue 项目没区别。前后端的桥就是tauri-apps/api这个包。4.3 前端依赖与 Vue 配置要点Vue 这边基本不用特殊配置但有两个细节要注意。第一Vite 的构建产物路径要和tauri.conf.json里的build.frontendDist对上默认是../dist。第二如果你用了 history 模式的路由Tauri 加载本地文件时可能出问题建议桌面端用 hash 模式或者配置好 base 路径。// vite.config.js 关键片段 export default defineConfig({ plugins: [vue()], clearScreen: false, server: { port: 1420, strictPort: true }, build: { target: esnext } });target: esnext是因为系统 WebView 版本较新不需要为老浏览器降级这样产物更小。strictPort保证端口固定避免 Tauri 找不到 dev server。5. 核心功能实现前后端如何打通5.1 写第一个 Rust 命令在src-tauri/src/main.rs里定义一个命令#[tauri::command] fn greet(name: str) - String { format!(你好{}, name) } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![greet]) .run(tauri::generate_context!()) .expect(error while running tauri application); }#[tauri::command]宏把普通函数变成可被前端调用的命令generate_handler!负责注册。前端这样调import { invoke } from tauri-apps/api/core; const msg await invoke(greet, { name: 世界 }); console.log(msg); // 你好世界参数名要和 Rust 函数参数名一致Tauri 会自动做序列化。返回值支持所有 serde 可序列化的类型结构体、Vec、Result 都行。如果 Rust 端返回ResultT, E前端 invoke 会 resolve 或 reject错误处理很自然。5.2 文件读写与本地存储实战桌面应用绕不开本地文件。Tauri 提供了 fs 插件但更推荐的做法是把文件操作封装成自己的 Rust 命令这样权限可控、逻辑集中。先加依赖npm run tauri add fs然后在 Rust 里写一个读取配置文件的命令use std::fs; use serde::{Serialize, Deserialize}; #[derive(Serialize, Deserialize)] struct AppConfig { theme: String, auto_save: bool, } #[tauri::command] fn load_config(path: String) - ResultAppConfig, String { let content fs::read_to_string(path).map_err(|e| e.to_string())?; serde_json::from_str(content).map_err(|e| e.to_string()) }前端调用时传入路径拿到结构化数据。这里的关键经验是路径不要在前端硬编码用 Tauri 的 path API 获取应用数据目录跨平台才不会出错。import { appDataDir } from tauri-apps/api/path; const dir await appDataDir(); const configPath ${dir}/config.json;5.3 网络请求与异步处理前端发请求直接用 fetch 或 axios 就行因为 WebView 本身就是浏览器环境。但如果请求涉及敏感 token、需要绕过 CORS、或者要复用 Rust 的连接池就该放到 Rust 端。Rust 用 reqwest 做异步请求#[tauri::command] async fn fetch_data(url: String) - ResultString, String { let resp reqwest::get(url).await.map_err(|e| e.to_string())?; resp.text().await.map_err(|e| e.to_string()) }注意async命令在 Tauri 里是原生支持的前端 await 即可。Rust 的 async 运行时由 Tauri 内置的 tokio 提供你不用自己配。踩过的坑是async 命令里不要持有跨 await 的非 Send 类型否则编译不过这是 Rust 所有权和 Send 约束的经典问题遇到报错先看类型是不是没实现 Send。6. 打包瘦身全流程把体积压到极限6.1 release 构建与体积优化配置开发模式跑通后打包命令是npm run tauri build但默认 release 配置还不够小。在src-tauri/Cargo.toml里加上优化配置[profile.release] panic abort codegen-units 1 lto true opt-level s strip true逐个解释为什么这么配。panic abort去掉 panic 展开的额外代码codegen-units 1让编译器做全局优化代价是编译变慢lto true开启链接时优化能跨 crate 删死代码opt-level s优先优化体积而非速度strip true去掉调试符号这一项通常能省下好几 MB。这套组合下来Rust 产物能从十几 MB 压到 3MB 以内。6.2 前端产物压缩与资源处理前端这边Vite 默认已经做了 tree-shaking 和压缩。额外能做的图片转 WebP、字体子集化、按需引入组件库。如果你用了 Element Plus 或 Ant Design Vue 这类大库务必配置按需引入否则光组件库就能让 dist 膨胀好几 MB。// 按需引入示例unplugin-vue-components import Components from unplugin-vue-components/vite; import { ElementPlusResolver } from unplugin-vue-components/resolvers; plugins: [ Components({ resolvers: [ElementPlusResolver()] }) ]还有一个容易忽略的点sourcemap。生产构建一定要关掉build.sourcemap: false否则 dist 里会多出一堆 .map 文件。6.3 各平台打包差异与注意事项Tauri 在不同平台打包机制不同。Windows 上默认产出 .msi 和 .exeNSISmacOS 上是 .app 和 .dmgLinux 上是 .deb、.rpm、.AppImage。跨平台打包必须在对应系统上执行或者用 CI 矩阵构建不能在一个系统上打出所有平台的包。Windows 上要注意 WebView2 的引导安装。如果你的用户可能没有 WebView2 RuntimeTauri 支持在安装器里内置引导配置tauri.conf.json的bundle.windows.webviewInstallMode。macOS 上要处理签名和公证否则用户打开会提示来源不明。Linux 上依赖 WebKitGTK不同发行版版本差异要测。提示Linux 打包时如果遇到 fpm 相关报错多半是缺少打包工具依赖。Debian 系装ruby-dev和fpm或者直接用 Tauri 的 AppImage 目标绕过。这类报错信息通常很直白按提示补依赖即可。7. 常见问题与排查技巧实录7.1 编译与依赖类问题速查现象可能原因解决方向linker not found缺 MSVC 构建工具装 VS Build Tools编译卡住很久首次全量编译正常后续增量快依赖下载失败网络或镜像问题配置 cargo 镜像源前端热更新失效dev server 端口不符检查 strictPort 与配置打包报 fpm 错误缺打包依赖补 ruby-dev/fpm 或换目标Rust 编译慢是常态尤其第一次。我的经验是给 cargo 配国内镜像源能显著改善依赖拉取速度。在~/.cargo/config.toml里配置即可。另外把target/目录排除出杀毒软件实时扫描编译速度能快不少这个坑很多人不知道。7.2 运行时与兼容性坑系统 WebView 的兼容性是 Tauri 最大的变量。Windows 上 WebView2 基于 Chromium兼容性很好macOS 的 WKWebView 基于 Safari某些 CSS 特性和 JS API 有差异Linux 的 WebKitGTK 版本碎片化最严重。我的做法是在 CI 里对三个平台都跑一遍核心功能测试尤其是涉及媒体播放、Canvas、WebGL 的部分。如果你要播放 m3u8 这类流媒体系统 WebView 对 HLS 的原生支持不一致。稳妥方案是用 hls.js 在前端做软解或者把解码逻辑放到 Rust 端。别指望所有平台的 WebView 都能直接播。7.3 性能与内存优化心得Tauri 应用的内存优化重点在前端。WebView 本身占内存你的 Vue 应用如果组件树很深、监听器没清理、大列表没虚拟滚动内存照样会涨。我实测下来一个列表页用虚拟滚动后内存从 120MB 降到 60MB 左右。Rust 端要注意的是别在命令里做阻塞操作。文件读写、大计算如果放在同步命令里会卡住主线程。用async命令或者tauri::async_runtime::spawn丢到后台线程。还有命令之间传递大数据时尽量传引用或路径别把整个大对象序列化来回搬。8. 我的实操体会与几个私藏技巧先说一个反直觉的结论Tauri 的体积优势在小应用上最明显但它的开发效率优势在需要系统能力的应用上才真正爆发。我那个项目里有个功能要遍历本地目录、解析文件、做增量同步用 Electron 时得写 Node 原生模块或者忍受 fs 的异步回调地狱换成 Rust 之后一个 rayon 并行迭代器几行代码搞定性能还翻倍。这种顺手是选型时容易忽略的隐性收益。第二个体会是关于 Rust 学习曲线的。别被Rust 很难吓退做 Tauri 开发你用的 Rust 是应用层 Rust不是写库、写底层的那种。命令函数、serde 序列化、错误处理翻来覆去就那几个模式。真正需要花时间的是理解所有权但这个东西写多了自然有感觉。我的建议是先照着官方 examples 抄能跑起来再改改出编译错误就查报错Rust 编译器的错误提示是我见过最友好的它会直接告诉你该怎么改。最后分享一个打包瘦身的小技巧用cargo bloat分析你的二进制里哪些依赖占了大头。我有一次发现某个间接依赖带进来一堆用不到的功能通过 feature 裁剪直接省了 1.5MB。还有图标资源别放多套高分辨率 PNG用 Tauri 的图标生成工具统一处理成各平台需要的格式能省不少空间。这个方向后续还能继续挖Tauri 的移动端支持Android/iOS已经在推进同一套 Vue 代码未来可能直接复用到移动端插件生态也在快速补齐自动更新、深链接、系统通知这些都有官方方案。如果你现在正被 Electron 的体积和内存困扰又不想放弃 Vue 的开发体验Tauri 值得你花一个周末试一次。试完你大概率会和我一样回不去了。
Tauri + Vue 跨平台桌面开发实战：从 Electron 224MB 到 4.7MB 的瘦身之路
1. 从 224MB 到 4.7MB这个数字差距到底意味着什么先把结论摆在前面同样一个功能不算复杂的桌面应用用 Electron 打包出来 224MB换成 TauriRust 做后端 系统 WebView 做前端渲染之后压到 4.7MB这不是营销话术是我自己项目里实测出来的数字。差了将近 48 倍。这个差距不是靠压缩资源、删依赖抠出来的而是两种方案从根子上就不一样。Electron 的思路是把整个 Chromium 浏览器内核和 Node.js 运行时一起塞进你的安装包里不管用户系统上有没有我都自带一份。好处是行为绝对一致坏处是——你为了显示一个设置面板附带了一整个浏览器。Tauri 的思路完全反过来前端还是写 HTML/CSS/JS我用的是 Vue但渲染交给操作系统自带的 WebView后端逻辑用 Rust 编译成原生二进制。安装包里没有浏览器内核只有你的业务代码和一小坨 Rust 编译产物所以体积能掉一个数量级。这篇文章适合谁看如果你正在做跨平台桌面应用被 Electron 的包体、内存占用、启动速度折磨过或者你听说过 Tauri 但不确定它能不能扛住真实项目那这篇就是写给你的。我会把 6 种主流跨平台桌面方案摆在一起横评重点拆 Tauri Vue 这条链路从选型逻辑、环境搭建、核心实现、打包瘦身到踩坑排查全部给到可直接抄的细节。Rust 没写过、Vue 只会一点也能跟着走下来。需要先说明一点下面涉及的体积、内存、启动时间数据都来自我本机Windows 11 macOS 14 双平台对一个中等复杂度应用登录、列表、详情、本地存储、一个网络请求模块的实测不同项目会有浮动但量级关系是稳定的。2. 六种跨平台桌面方案横评先搞清楚你在选什么在动手之前得先把牌桌上的选项看清楚。跨平台桌面开发这些年沉淀下来的主流路线大致可以归成六类。我把它们的核心机制、典型体积、适用场景整理成一张表你可以直接对号入座。方案渲染机制后端语言典型空壳体积内存占用学习曲线最适合Electron自带 ChromiumNode.js150-250MB高低生态成熟、要绝对一致Tauri系统 WebViewRust3-10MB低中高追求体积与性能Qt (C/QML)自绘/原生控件C30-80MB中高工业级、重原生Flutter Desktop自绘 SkiaDart20-40MB中中移动桌面一套代码.NET MAUI原生控件C#40-90MB中中Windows 生态为主Wails系统 WebViewGo5-15MB低中会 Go、想轻量这张表里最值得对比的是 Electron 和 Tauri因为它们的前端开发体验几乎一样——都是写网页区别全在后端和运行时。Electron 把 Chromium 和 Node 打包进去等于给每个用户发了一台浏览器虚拟机Tauri 则假设用户系统已经有 WebViewWindows 上是 WebView2macOS 上是 WKWebViewLinux 上是 WebKitGTK只发业务代码。Qt 和 Flutter 走的是另一条路——自绘或原生控件不依赖 WebView所以体积和内存介于两者之间但前端不能用你熟悉的 Vue/React得学 QML 或 Dart。.NET MAUI 在 Windows 上很舒服跨到 macOS/Linux 就没那么顺。Wails 是 Go 版的 Tauri思路一致如果你团队是 Go 技术栈它比 Tauri 更顺手。我为什么最后押注 Tauri Vue三个理由。第一我的前端资产是现成的 Vue 项目迁移成本几乎为零Tauri 官方对 Vue 的支持非常成熟。第二体积和内存是硬指标我的用户里有不少是老机器224MB 的安装包和动辄 300MB 的内存占用是劝退级别的。第三Rust 后端给了我一个意外收获——那些原本要写 Node 原生模块才能干的活文件系统、进程管理、加密Rust 直接原生搞定还不用担心 ABI 兼容。提示选型不要只看体积。如果你的应用重度依赖 Chromium 特有的 API比如某些 WebRTC 高级特性、特定的媒体编解码系统 WebView 的兼容性会成为坑这时候 Electron 的自带内核反而是优势。体积小不是唯一目标能跑对才是。3. Tauri Vue 的核心机制为什么它能瘦这么多3.1 前端还是 Vue但渲染引擎换了人很多人一听 Tauri 就以为要重学一套 UI 框架其实不是。你的 Vue 代码、Vite 构建流程、组件库、路由、Pinia 状态管理全部照旧。Tauri 只是把你的前端产物dist 目录里的 HTML/CSS/JS当成静态资源交给系统 WebView 去渲染。也就是说你写的还是网页只是这个网页被装进了一个原生窗口里而不是 Chromium 窗口里。这个替换带来的连锁反应很关键。Chromium 内核压缩后也有 100MB 以上而系统 WebView 是操作系统自带的不占你的包体。Windows 上依赖 WebView2 RuntimeWin11 自带Win10 大多已通过更新安装macOS 上 WKWebView 是系统组件Linux 上需要 WebKitGTK。这就是体积从 224MB 掉到 4.7MB 的第一大来源。3.2 Rust 后端不是噱头是实打实的收益Tauri 的后端是 Rust 编译出的原生二进制。你在前端通过invoke调用 Rust 里用#[tauri::command]标注的函数数据通过序列化在两端传递。这套机制的好处有三个层面。性能层面Rust 没有 GC内存占用和启动延迟都可控。我实测冷启动Electron 版本约 1.8 秒Tauri 版本约 0.4 秒差距主要来自不用初始化整个 Chromium。安全层面Tauri 默认只暴露你显式声明的命令前端拿不到任意系统调用能力攻击面比 Node 集成小得多。能力层面文件读写、系统托盘、全局快捷键、自动更新、进程调用Tauri 都有官方插件不用再折腾 Node 原生模块编译。3.3 体积账本4.7MB 是怎么算出来的我把最终安装包的构成拆开给你看这样你就知道每一 MB 花在哪。Rust 编译产物release strip LTO约 2.8MB前端 dist 产物Vue 应用gzip 后约 1.2MB图标、配置、清单文件约 0.4MB安装器自身开销约 0.3MB合计约 4.7MB。对比 Electron 的 224MB其中 Chromium 内核就占了 150MB 以上Node 运行时 40MB 左右剩下才是你的代码。所以瘦身的本质不是优化而是不再打包你根本不需要的浏览器。注意4.7MB 是安装包体积不是运行时内存。Tauri 应用运行时内存通常在 30-80MB 区间取决于你的前端复杂度因为 WebView 本身也要占内存。但相比 Electron 动辄 200MB 的常驻依然是数量级的改善。4. 环境搭建与项目初始化从零到能跑4.1 Rust 环境安装与验证第一步是装 Rust。Windows 上直接去官网下载 rustup-init.exe一路默认即可它会帮你装好 rustc、cargo 和 MSVC 链接器需要 Visual Studio Build Tools安装器会提示。macOS/Linux 上一条命令curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh装完验证rustc --version cargo --version两个命令都能输出版本号就对了。这里有个新手常踩的坑Windows 上如果没装 MSVC 构建工具cargo build 会报 linker not found。解决办法是装 Visual Studio Build Tools勾选使用 C 的桌面开发。Rust 语言本身不用先学透再上手 Tauri。你只需要理解所有权、借用、生命周期这几个核心概念的大意剩下的边写边查。Tauri 命令函数的写法非常模板化照着官方示例改就行。真想系统入门把《Rust 程序设计语言》前 10 章过一遍足够应付大部分桌面开发场景。4.2 创建 Tauri Vue 项目官方脚手架最省事。确保 Node 18 和包管理器就绪然后npm create tauri-applatest交互式问答里选项目名随便起前端框架选 Vue包管理器选 npm或 pnpmTypeScript 看个人喜好。生成后进入目录cd your-app npm install npm run tauri dev第一次运行会触发 Rust 编译比较慢可能几分钟之后增量编译就快了。窗口弹出来那一刻说明链路通了。项目结构里你要重点关注两个地方。src-tauri/是 Rust 后端src-tauri/src/main.rs是入口src-tauri/tauri.conf.json是配置。src/是你的 Vue 前端和平时的 Vue 项目没区别。前后端的桥就是tauri-apps/api这个包。4.3 前端依赖与 Vue 配置要点Vue 这边基本不用特殊配置但有两个细节要注意。第一Vite 的构建产物路径要和tauri.conf.json里的build.frontendDist对上默认是../dist。第二如果你用了 history 模式的路由Tauri 加载本地文件时可能出问题建议桌面端用 hash 模式或者配置好 base 路径。// vite.config.js 关键片段 export default defineConfig({ plugins: [vue()], clearScreen: false, server: { port: 1420, strictPort: true }, build: { target: esnext } });target: esnext是因为系统 WebView 版本较新不需要为老浏览器降级这样产物更小。strictPort保证端口固定避免 Tauri 找不到 dev server。5. 核心功能实现前后端如何打通5.1 写第一个 Rust 命令在src-tauri/src/main.rs里定义一个命令#[tauri::command] fn greet(name: str) - String { format!(你好{}, name) } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![greet]) .run(tauri::generate_context!()) .expect(error while running tauri application); }#[tauri::command]宏把普通函数变成可被前端调用的命令generate_handler!负责注册。前端这样调import { invoke } from tauri-apps/api/core; const msg await invoke(greet, { name: 世界 }); console.log(msg); // 你好世界参数名要和 Rust 函数参数名一致Tauri 会自动做序列化。返回值支持所有 serde 可序列化的类型结构体、Vec、Result 都行。如果 Rust 端返回ResultT, E前端 invoke 会 resolve 或 reject错误处理很自然。5.2 文件读写与本地存储实战桌面应用绕不开本地文件。Tauri 提供了 fs 插件但更推荐的做法是把文件操作封装成自己的 Rust 命令这样权限可控、逻辑集中。先加依赖npm run tauri add fs然后在 Rust 里写一个读取配置文件的命令use std::fs; use serde::{Serialize, Deserialize}; #[derive(Serialize, Deserialize)] struct AppConfig { theme: String, auto_save: bool, } #[tauri::command] fn load_config(path: String) - ResultAppConfig, String { let content fs::read_to_string(path).map_err(|e| e.to_string())?; serde_json::from_str(content).map_err(|e| e.to_string()) }前端调用时传入路径拿到结构化数据。这里的关键经验是路径不要在前端硬编码用 Tauri 的 path API 获取应用数据目录跨平台才不会出错。import { appDataDir } from tauri-apps/api/path; const dir await appDataDir(); const configPath ${dir}/config.json;5.3 网络请求与异步处理前端发请求直接用 fetch 或 axios 就行因为 WebView 本身就是浏览器环境。但如果请求涉及敏感 token、需要绕过 CORS、或者要复用 Rust 的连接池就该放到 Rust 端。Rust 用 reqwest 做异步请求#[tauri::command] async fn fetch_data(url: String) - ResultString, String { let resp reqwest::get(url).await.map_err(|e| e.to_string())?; resp.text().await.map_err(|e| e.to_string()) }注意async命令在 Tauri 里是原生支持的前端 await 即可。Rust 的 async 运行时由 Tauri 内置的 tokio 提供你不用自己配。踩过的坑是async 命令里不要持有跨 await 的非 Send 类型否则编译不过这是 Rust 所有权和 Send 约束的经典问题遇到报错先看类型是不是没实现 Send。6. 打包瘦身全流程把体积压到极限6.1 release 构建与体积优化配置开发模式跑通后打包命令是npm run tauri build但默认 release 配置还不够小。在src-tauri/Cargo.toml里加上优化配置[profile.release] panic abort codegen-units 1 lto true opt-level s strip true逐个解释为什么这么配。panic abort去掉 panic 展开的额外代码codegen-units 1让编译器做全局优化代价是编译变慢lto true开启链接时优化能跨 crate 删死代码opt-level s优先优化体积而非速度strip true去掉调试符号这一项通常能省下好几 MB。这套组合下来Rust 产物能从十几 MB 压到 3MB 以内。6.2 前端产物压缩与资源处理前端这边Vite 默认已经做了 tree-shaking 和压缩。额外能做的图片转 WebP、字体子集化、按需引入组件库。如果你用了 Element Plus 或 Ant Design Vue 这类大库务必配置按需引入否则光组件库就能让 dist 膨胀好几 MB。// 按需引入示例unplugin-vue-components import Components from unplugin-vue-components/vite; import { ElementPlusResolver } from unplugin-vue-components/resolvers; plugins: [ Components({ resolvers: [ElementPlusResolver()] }) ]还有一个容易忽略的点sourcemap。生产构建一定要关掉build.sourcemap: false否则 dist 里会多出一堆 .map 文件。6.3 各平台打包差异与注意事项Tauri 在不同平台打包机制不同。Windows 上默认产出 .msi 和 .exeNSISmacOS 上是 .app 和 .dmgLinux 上是 .deb、.rpm、.AppImage。跨平台打包必须在对应系统上执行或者用 CI 矩阵构建不能在一个系统上打出所有平台的包。Windows 上要注意 WebView2 的引导安装。如果你的用户可能没有 WebView2 RuntimeTauri 支持在安装器里内置引导配置tauri.conf.json的bundle.windows.webviewInstallMode。macOS 上要处理签名和公证否则用户打开会提示来源不明。Linux 上依赖 WebKitGTK不同发行版版本差异要测。提示Linux 打包时如果遇到 fpm 相关报错多半是缺少打包工具依赖。Debian 系装ruby-dev和fpm或者直接用 Tauri 的 AppImage 目标绕过。这类报错信息通常很直白按提示补依赖即可。7. 常见问题与排查技巧实录7.1 编译与依赖类问题速查现象可能原因解决方向linker not found缺 MSVC 构建工具装 VS Build Tools编译卡住很久首次全量编译正常后续增量快依赖下载失败网络或镜像问题配置 cargo 镜像源前端热更新失效dev server 端口不符检查 strictPort 与配置打包报 fpm 错误缺打包依赖补 ruby-dev/fpm 或换目标Rust 编译慢是常态尤其第一次。我的经验是给 cargo 配国内镜像源能显著改善依赖拉取速度。在~/.cargo/config.toml里配置即可。另外把target/目录排除出杀毒软件实时扫描编译速度能快不少这个坑很多人不知道。7.2 运行时与兼容性坑系统 WebView 的兼容性是 Tauri 最大的变量。Windows 上 WebView2 基于 Chromium兼容性很好macOS 的 WKWebView 基于 Safari某些 CSS 特性和 JS API 有差异Linux 的 WebKitGTK 版本碎片化最严重。我的做法是在 CI 里对三个平台都跑一遍核心功能测试尤其是涉及媒体播放、Canvas、WebGL 的部分。如果你要播放 m3u8 这类流媒体系统 WebView 对 HLS 的原生支持不一致。稳妥方案是用 hls.js 在前端做软解或者把解码逻辑放到 Rust 端。别指望所有平台的 WebView 都能直接播。7.3 性能与内存优化心得Tauri 应用的内存优化重点在前端。WebView 本身占内存你的 Vue 应用如果组件树很深、监听器没清理、大列表没虚拟滚动内存照样会涨。我实测下来一个列表页用虚拟滚动后内存从 120MB 降到 60MB 左右。Rust 端要注意的是别在命令里做阻塞操作。文件读写、大计算如果放在同步命令里会卡住主线程。用async命令或者tauri::async_runtime::spawn丢到后台线程。还有命令之间传递大数据时尽量传引用或路径别把整个大对象序列化来回搬。8. 我的实操体会与几个私藏技巧先说一个反直觉的结论Tauri 的体积优势在小应用上最明显但它的开发效率优势在需要系统能力的应用上才真正爆发。我那个项目里有个功能要遍历本地目录、解析文件、做增量同步用 Electron 时得写 Node 原生模块或者忍受 fs 的异步回调地狱换成 Rust 之后一个 rayon 并行迭代器几行代码搞定性能还翻倍。这种顺手是选型时容易忽略的隐性收益。第二个体会是关于 Rust 学习曲线的。别被Rust 很难吓退做 Tauri 开发你用的 Rust 是应用层 Rust不是写库、写底层的那种。命令函数、serde 序列化、错误处理翻来覆去就那几个模式。真正需要花时间的是理解所有权但这个东西写多了自然有感觉。我的建议是先照着官方 examples 抄能跑起来再改改出编译错误就查报错Rust 编译器的错误提示是我见过最友好的它会直接告诉你该怎么改。最后分享一个打包瘦身的小技巧用cargo bloat分析你的二进制里哪些依赖占了大头。我有一次发现某个间接依赖带进来一堆用不到的功能通过 feature 裁剪直接省了 1.5MB。还有图标资源别放多套高分辨率 PNG用 Tauri 的图标生成工具统一处理成各平台需要的格式能省不少空间。这个方向后续还能继续挖Tauri 的移动端支持Android/iOS已经在推进同一套 Vue 代码未来可能直接复用到移动端插件生态也在快速补齐自动更新、深链接、系统通知这些都有官方方案。如果你现在正被 Electron 的体积和内存困扰又不想放弃 Vue 的开发体验Tauri 值得你花一个周末试一次。试完你大概率会和我一样回不去了。
