桌面端开发里，Electron曾经是React团队快速交付客户端的第一选择。它把Chromium和Node.js一起塞进应用，前端代码和系统调用都能用JS完成，但代价是安装包通常超过100MB，内存占用也经常被用户抱怨。Tauri给出了另一套方案：继续保留React界面，底层改用Rust和系统WebView，同等功能下安装包通常只有几MB。本文会结合一次实际迁移经历，说明如何把现有React项目从Electron平滑迁到Tauri，并避免折腾过程中最常见的几个坑。
先理解Electron与Tauri的运行时差异
迁移前如果不搞清楚两者的架构区别，很容易把Electron的思维直接套到Tauri上，导致代码结构别扭。Electron应用运行时包含完整的Chromium浏览器内核和Node.js环境，主进程通过Node API访问文件系统、网络、系统托盘等能力，渲染进程展示React页面。这样的好处是环境统一，但每个应用都要携带一个完整浏览器。
Tauri则不同。它在Windows上使用系统自带的WebView2，在macOS上使用WKWebView，在Linux上使用WebKitGTK，不再捆绑浏览器内核。后端由Rust编写，操作系统能力通过Rust crate和Tauri插件提供。对React前端来说，DOM、组件、样式这些完全不受影响；真正需要改造的是原来用ipcMain、ipcRenderer以及Node模块实现的那部分逻辑。
体积上的差距非常直观。一个基础Electron应用打包后大约120MB到180MB，而相同界面的Tauri应用在安装包层面通常只有3MB到10MB。运行时内存方面，Tauri没有额外的Node.js常驻进程，系统WebView又由多个应用共享部分资源，因此空闲内存通常只有Electron的三分之一甚至更低。这也是很多工具类应用决定迁移的直接原因。
拆分项目结构并初始化Tauri工程
现有React项目通常已经把渲染层代码放在src目录，Webpack或Vite负责打包。迁移的第一步不是改业务组件，而是在项目根部增加一个Tauri的原生工程目录。对Vite用户来说，可以直接在项目里执行初始化命令，让工具自动生成src-tauri目录。
npm create tauri-app@latest . # 选择已有的前端框架与包管理器，或者指定 --template react-ts
生成完成后，项目会多出src-tauri目录，里面包含Cargo.toml、src/main.rs、tauri.conf.json和icons等文件。React前端代码保持原地不动，Vite的构建产物会被Tauri读取。tauri.conf.json中需要确认devPath指向开发服务器地址，distDir指向前端构建输出目录。例如一个标准配置大致如下：
{
"build": {
"devPath": "http://localhost:5173",
"distDir": "../dist",
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build"
},
"app": {
"windows": [
{
"title": "我的桌面应用",
"width": 1200,
"height": 800
}
]
}
}
原Electron项目里main.js负责创建BrowserWindow、设置菜单、监听应用生命周期，这些代码不能直接搬到React渲染进程中。Tauri中的窗口创建和事件注册都放在src-tauri/src/main.rs里，由Rust完成。菜单、托盘、全局快捷键等能力也需要从Node模块改成对应的Tauri插件或Rust代码。迁移时建议先把窗口跑起来，再逐个迁移系统能力，避免一次性改动太多难以排查。
IPC通信改造：从ipcRenderer到invoke
Electron的React代码通常通过preload脚本暴露的API调用主进程，底层使用ipcRenderer.invoke或者ipcRenderer.send。Tauri的前端通信模型更简单：Rust函数用#[tauri::command]标记，前端通过invoke函数按名称调用。参数和返回值会自动做JSON序列化。
先看一个典型Electron写法。preload中暴露window.electronAPI.greet，React里调用：
// Electron preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
greet: (name) => ipcRenderer.invoke('greet', name)
});
// React 组件中
const msg = await window.electronAPI.greet('World');
迁移到Tauri后，前端不再依赖preload和contextBridge，直接导入invoke即可。Rust端定义一个命令函数，逻辑与原先在主进程中的处理类似：
// src-tauri/src/main.rs
#[tauri::command]
fn greet(name: String) -> String {
format!("Hello, {}!", name)
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
React侧调用方式如下：
import { invoke } from '@tauri-apps/api/core';
const msg = await invoke('greet', { name: 'World' });
这里有一个容易忽略的细节：Rust函数的参数名如果是snake_case，前端传递JSON对象时需要使用camelCase，Tauri会自动做转换。例如Rust参数是user_name，前端要传{ userName: 'xxx' }。此外，invoke在Rust命令返回错误时会抛出异常，React中需要配合try-catch处理，不能用Electron时代的返回值判断逻辑。
系统能力的替代方案与权限配置
Electron应用里直接用Node的fs模块读写文件、用child_process执行命令、用Notification API发通知。迁移到Tauri后，这些能力需要通过官方插件或Rust crate实现，而且出于安全考虑，前端默认无法随意访问系统资源。
文件读写推荐使用@tauri-apps/plugin-fs。安装插件并在Rust端注册后，React代码可以读取用户目录下的文件。通知使用@tauri-apps/plugin-notification，托盘和菜单则使用Rust侧的tray-icon相关API。Shell命令可以通过@tauri-apps/plugin-shell执行，但通常建议把需要执行命令的逻辑改成Rust函数，减少权限暴露面。
Tauri的权限系统通过src-tauri/capabilities/default.json声明。例如只允许前端访问应用数据目录和下载目录，可以这样配置：
{
"identifier": "default",
"description": "默认能力配置",
"windows": ["main"],
"permissions": [
"core:default",
"fs:allow-read-text-file",
"fs:allow-write-text-file",
{
"identifier": "fs:scope",
"allow": [
{ "path": "$APPDATA/**" },
{ "path": "$DOWNLOAD/**" }
]
}
]
}
迁移时不要图省事直接开放fs:allow-all，那样会失去Tauri的安全优势。按照功能最小化原则，只给React层授予真正需要的权限，其余文件操作放到Rust命令中完成。原Electron中的Node原生模块很多无法直接使用，需要寻找功能相近的Rust crate，这也是迁移工作量中占比最大的部分。
打包发布与迁移中的常见坑位
Tauri的发布构建命令是npm run tauri build，会根据当前操作系统生成对应的安装包。Windows下生成.msi或.exe，macOS生成.dmg或.app，Linux则可以输出.deb、AppImage和rpm。第一次编译Rust依赖会比较慢，但后续构建会复用缓存，通常几分钟内完成。
迁移过程中最容易踩的坑集中在三个地方。第一是系统WebView版本差异，Windows 7或旧版Windows 10可能缺少WebView2运行时，需要引导用户安装；macOS不同版本的WKWebView对CSS和JS特性支持不完全一致，建议跨版本测试。第二是路径处理，Tauri的路径API与Node.js的path模块行为不同，Windows下的反斜杠和盘符需要特别注意，尽量使用Tauri提供的path API拼接，不要手动拼字符串。第三是开发模式与生产模式的资源路径，前端代码里写死的相对路径可能在打包后失效，应通过Vite的base配置或Tauri的协议转换来获取资源。
还有一些从Electron继承下来的习惯需要纠正。Electron主进程可以直接访问任意文件路径，Tauri的Rust命令虽然有更强能力，但前端调用时受权限配置约束。原先放在渲染进程里的敏感逻辑可以下沉到Rust命令中，既提升性能又减少攻击面。迁移完成后，团队通常会发现安装包体积缩小一个数量级，内存占用下降明显，而React开发体验几乎不受影响。
从Electron迁移到Tauri，不是说把package.json换一下就能完成，而是一次围绕系统调用和权限模型的架构调整。React组件可以保留，Node主进程逻辑需要用Rust重写，IPC通信从ipcRenderer切换为invoke，系统能力通过插件和权限配置逐步替代。对于体积敏感、追求轻量化的桌面应用，这样的迁移成本通常能在安装包大小和资源占用上得到直接回报。