Vue / React / Svelte 与 Tauri 的联调方案

Tauri 本身不绑定任何前端框架，你完全可以用 Vue、React、Svelte 或原生 HTML 来构建界面。不过，为了在开发阶段实时看到效果，并能在应用中调用 Tauri 提供的系统 API，需要一套顺畅的联调方案。下面分别说明这三种主流框架与 Tauri 的配置和协作方式。

通用原理

无论哪种框架，联调的核心都是：

前端开发服务器（Vite、Webpack 等）在本地启动，提供热更新；
Tauri 开发模式（tauri dev）启动 Rust 后端，并打开一个 WebView 窗口，指向前端开发服务器的地址；
前端通过 @tauri-apps/api 提供的 JavaScript 包，调用后端 Rust 命令。

Tauri 配置文件 tauri.conf.json 中的 devUrl 就是用来指定开发时的前端地址的（例如 http://localhost:5173）。

1. Vue + Tauri

项目初始化

最简单的方式是用 create-tauri-app 脚手架，选择 Vue + Vite：

npm create tauri-app@latest my-app -- --template vue

它会自动生成一个基于 Vite 的 Vue 项目，并配置好 Tauri。

手动配置已有 Vue 项目

如果你已有 Vue（Vite）项目，可以手动添加 Tauri：

npm install -D @tauri-apps/cli
npx tauri init

执行后会生成 src-tauri 目录。然后修改 src-tauri/tauri.conf.json 的 build.devUrl 为你的 Vite 开发服务器地址（默认是 http://localhost:5173）。

联调步骤

在 Vue 组件中安装 @tauri-apps/api：

   npm install @tauri-apps/api

在需要调用原生功能时，直接使用它。例如，弹出一个系统消息框：

   <script setup>
   import { invoke } from '@tauri-apps/api/tauri';
   import { message } from '@tauri-apps/api/dialog';

   async function showMessage() {
     await message('Hello from Vue and Tauri!', 'Tauri');
   }
   </script>

运行 npm run dev（Vite 开发服务器）和 npx tauri dev（在另一个终端，或直接使用 tauri dev 命令，它会自动并行启动前端）。

注意：Tauri CLI 2.0 以后可以直接用 tauri dev 自动启动前端服务器，无需两个终端。

2. React + Tauri

项目初始化

使用脚手架：

npm create tauri-app@latest my-app -- --template react

同样生成 React + Vite 的工程。

手动配置现有 React 项目

安装 CLI 和初始化：

   npm install -D @tauri-apps/cli
   npx tauri init

如果项目是用 create-react-app 创建的，可能需要调整 devUrl 为 http://localhost:3000。推荐迁移到 Vite，因为 CRA 已不再维护，且 Tauri 和 Vite 配合更顺滑。

联调步骤

安装 API 包：

npm install @tauri-apps/api

在组件中调用自定义 Rust 命令（假设已定义 greet）：

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

function App() {
  const greet = async () => {
    const response = await invoke('greet', { name: 'World' });
    console.log(response);
  };

  return <button onClick={greet}>Greet</button>;
}

启动：npm run dev + npx tauri dev。

3. Svelte + Tauri

项目初始化

脚手架支持 Svelte：

npm create tauri-app@latest my-app -- --template svelte

这同样是 Svelte + Vite 的组合。

手动配置

安装 Tauri CLI、初始化。
确认 tauri.conf.json 的 devUrl 为 http://localhost:5173（默认端口）。

联调步骤

安装 API：

npm install @tauri-apps/api

在 App.svelte 中使用：

<script>
  import { invoke } from '@tauri-apps/api/tauri';

  let name = '';
  let result = '';

  async function greet() {
    result = await invoke('greet', { name });
  }
</script>

<input bind:value={name} placeholder="Your name" />
<button on:click={greet}>Greet</button>
<p>{result}</p>

启动 npm run dev 和 npx tauri dev。

进阶联调技巧

使用 Vite 代理或环境变量

如果 Tauri 开发前端地址不是默认端口，可在 tauri.conf.json 中直接修改 devUrl，或通过环境变量 TAURI_DEV_URL 覆盖。

在 Vite 中访问 Tauri API 的类型

安装 @tauri-apps/api 后，TypeScript 类型自动可用。若要为自定义 Rust 命令生成类型，可以使用 tauri-specta 或手动编写 .d.ts。

调试 Rust 端

可以在 VS Code 中配置 Rust 的调试器（CodeLLDB 或 C/C++），然后将 Tauri 开发模式附加到进程，实现前后端同时断点调试。

热更新与状态保持

前端保持 Vite 的 HMR（热模块替换），刷新不会丢失组件状态。如果你希望在修改 Rust 代码后也自动重启后端，可以使用 tauri dev 的 --watch 参数，它默认会监听 Rust 文件变化并重新编译。Windows 上文件监听可能需要额外的配置（例如 cargo watch）。

常见的坑和解决办法

API 未定义：确保只在 Tauri 环境调用 @tauri-apps/api，浏览器直接打开前端地址会报错。可以封装检测函数：

  export const isTauri = () => window.__TAURI__ !== undefined;

CORS 问题：开发模式下 Tauri 窗口加载的是前端开发服务器，没有跨域限制。但如果你在前端服务器中发起网络请求到其他域名，仍受 CORS 影响。可以在 Rust 后端搭建代理或使用 Tauri 的 HTTP 插件。
Windows WebView2：确保开发系统安装了 WebView2 运行时，否则 Tauri 会提示下载。分发应用时可以内嵌固定版本。

一句话总结

Vue、React、Svelte 与 Tauri 的联调都遵循“前端服务器提供界面 + Tauri 命令对接原生”的模式，你只需关注 devUrl 配置和 API 包的引入。Tauri 的脚手架几乎屏蔽了所有底层细节，让你可以专注于用最熟悉的框架写界面，用 Rust 实现性能敏感或系统相关逻辑。