2026年5月31日 11:08

Tauri 中如何集成 React、Vue 或 Svelte？

Tauri 集成 React、Vue 或 Svelte 的关键，不是把前端框架“塞进”桌面壳里，而是让前端构建工具、Tauri 开发服务器和 Rust 后端的边界对齐。Tauri 负责窗口、系统 API、打包和权限；React、Vue、Svelte 仍然按普通 Web 项目开发。真正容易出问题的地方，通常是 dev server 端口、构建产物目录、前端路由、Tauri API 版本和安全权限没有配套。

React 项目怎么配置

React + Vite 的常见配置如下，重点是固定端口并忽略 src-tauri，否则 Rust 文件变化可能触发前端重复刷新：

ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  clearScreen: false,
  server: {
    port: 1420,
    strictPort: true,
    watch: { ignored: ['**/src-tauri/**'] }
  }
});

Tauri 2 的配置通常在 src-tauri/tauri.conf.json 里声明开发地址和构建产物：

json
{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "frontendDist": "../dist",
    "devUrl": "http://localhost:1420"
  }
}

如果使用旧版 Tauri，字段可能是 distDir 和 devPath。这类版本差异是迁移时最常见的坑，不要照抄配置后直接怀疑框架不兼容。

Vue 和 Svelte 有什么不同

Vue 主要替换 Vite 插件：

bash
npm install vue @vitejs/plugin-vue -D

ts
import vue from '@vitejs/plugin-vue';
export default defineConfig({ plugins: [vue()] });

Svelte 则使用 @sveltejs/vite-plugin-svelte。三者和 Tauri 的交互方式没有本质区别，区别只在前端编译阶段。Tauri 不关心你写 JSX、模板还是 .svelte 文件，它只关心 devUrl 是否可访问、构建产物是否存在、前端是否按权限调用系统能力。

前端如何调用 Tauri 能力

安装前端 API 后，可以用 invoke 调用 Rust 命令：

bash
npm install @tauri-apps/api

ts
import { invoke } from '@tauri-apps/api/core';

const message = await invoke<string>('greet', { name: 'React' });

Rust 端需要显式注册命令：

rust
#[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("failed to run app");
}

生产构建前还要检查什么

桌面应用和网页最大的区别，是用户打开的是一个固定版本的本地包。构建前建议先单独跑一次前端构建，再跑 Tauri 构建：

bash
npm run build
npm run tauri build

如果 dist 目录不存在，优先检查前端构建脚本，而不是 Tauri 配置。生产环境还要确认 base 路径，Vite 默认通常没问题，但如果你配置过 CDN 路径或子目录部署，桌面端可能会找不到静态资源。另一个容易忽略的点是环境变量，浏览器端只能拿到构建时注入的变量，不能像 Node 服务一样运行时读取 .env。需要根据桌面端、Web 端分别维护配置时，可以用 TAURI_ENV_PLATFORM 或自己的构建脚本区分。

系统能力不要混进前端组件

React、Vue、Svelte 组件里可以直接调用 Tauri API，但大型项目最好封装一层 services。比如文件选择、配置读写、日志导出都放到独立模块，组件只关心业务结果。这样做的好处是将来要 Mock、迁移插件或调整权限时，不需要到处改按钮事件。代价是多写一层薄封装，但桌面应用生命周期长，这点成本通常值得。

追问

前端路由应该用 history 还是 hash？

桌面端更稳妥的是 hash 路由，因为生产环境加载的是本地文件，刷新或深链进入某个 history 路径时，WebView 可能找不到对应资源。React Router 的 HashRouter、Vue Router 的 createWebHashHistory 都能减少这类问题。取舍在于 URL 不够漂亮，但桌面应用里地址栏通常不可见，这个代价很小。如果坚持 history 模式，需要自己处理 fallback，否则开发环境正常、打包后白屏很常见。

能不能直接把 Next.js 放进 Tauri？

可以，但不建议把 SSR 当作默认方案。Tauri 更适合加载静态前端，Next.js 需要配置静态导出，避免依赖运行时服务端。边界是：如果你的页面强依赖服务端渲染、API Routes 或 Node 运行时，迁移成本会明显升高。实际项目里更常见的做法是把桌面端改成 Vite React，把需要的接口能力放到 Rust 或远端服务里。

Tauri API 调不通一般怎么排查？

先确认使用的 API 包和 Tauri 版本匹配，Tauri 1 和 Tauri 2 的 import 路径不同。再检查命令名是否注册到 generate_handler!，参数名是否和前端传入对象一致。还有一个坑是权限：文件、Shell、Dialog 等能力不是随便能用，必须在 capabilities 或配置中声明。不要一上来改 Rust 逻辑，先看浏览器控制台和终端日志，通常错误信息已经说明是权限还是命令不存在。

多框架项目怎么选择 React、Vue 或 Svelte？

如果团队已有 React 组件库，React 的迁移成本最低；Vue 适合已有 Vue 后台或中台体系的团队；Svelte 包体更轻，但生态和团队熟悉度要评估。Tauri 本身不会因为某个框架变快很多，主要性能差异来自前端渲染方式和资源体积。真正的取舍是长期维护成本，而不是示例项目跑起来的速度。桌面应用还要考虑自动更新、文件权限和系统集成，这些往往比选哪个前端框架更影响交付。

标签：Tauri

推荐的集成方式