前端项目手动接入 Tauri - 人人都会AI编程

将 Tauri 集成到一个已有的前端项目（比如一个 React、Vue 或 Svelte 项目）中，不需要重写现有代码，只需添加一个轻量的 Rust 壳。整个过程主要包含四步：安装 CLI、初始化 Tauri、配置开发命令、验证运行。

1. 安装 Tauri CLI

Tauri CLI 是管理项目构建、开发调试的核心工具，推荐作为开发依赖安装在项目中：

npm install --save-dev @tauri-apps/cli

如果网络不佳或想全局使用，也可以安装独立的 Rust CLI：

cargo install tauri-cli

之后在项目里就可以用 npx tauri 调用命令。

2. 初始化 Tauri 目录

在前端项目根目录执行：

npx tauri init

这个命令会以交互式问答引导你填写基本信息：应用名称、窗口标题、前端资源目录（通常是 dist 或 build）、开发服务器地址（如 http://localhost:5173）等。

命令完成后，项目下会多出 src-tauri 目录，结构大致如下：

src-tauri/
  Cargo.toml        # Rust 依赖配置
  tauri.conf.json   # Tauri 应用配置（窗口大小、权限、启动路径等）
  src/
    main.rs         # Rust 入口文件
  icons/            # 应用图标（可后续替换）

所有 Rust 代码和配置都集中在这个文件夹内，与你的前端代码完全分离。

3. 配置开发环境

前端项目通常有自己的开发服务器（Vite 的 5173，Create React App 的 3000）。需要让 Tauri 知道在开发模式下该连接哪个 URL。

打开 src-tauri/tauri.conf.json，确认 build.devUrl 字段指向你的开发服务器地址。例如 Vite 项目默认为：

"build": {
  "devUrl": "http://localhost:5173",
  "frontendDist": "../dist"
}

同时确保 frontendDist 指向你前端构建后的输出目录（通常相对于 src-tauri 目录）。

4. 调整前端基础路径（重要）

Tauri 在正式打包后是通过本地文件协议加载 index.html，路径解析方式与 Web 服务器不同。如果你的前端使用了 History 模式路由或带有 / 开头的静态资源，需要把 base 设置为相对路径：

Vite：vite.config.js 中设置 base: './'
Vue CLI：vue.config.js 中设置 publicPath: './'
React (CRA)：在 package.json 中设置 "homepage": "."
其他框架也需确保资源引用均为相对路径。

5. 运行与调试

配置完成后，就可以在本地同时启动前端开发服务器和 Tauri 桌面窗口：

npx tauri dev

Tauri 会先启动你的前端 dev server（根据 devUrl 检测，或者自动调用你的 npm run dev），然后打开一个带有 WebView 的系统窗口，实时渲染你的前端界面。修改代码时，前端页面会自动热更新，Rust 代码的修改则需要重新编译（首次编译稍慢，后续增量编译很快）。

6. 前后端通信基础

如果想让前端调用 Rust 提供的原生能力，可以在 src-tauri/src/main.rs 中定义命令，例如：

#[tauri::command]
fn greet(name: &str) -> String {
    format!("你好, {}! 来自 Rust", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("启动失败");
}

前端则需要安装 Tauri 的 JavaScript API 包：

npm install @tauri-apps/api

然后在组件中调用：

import { invoke } from '@tauri-apps/api/tauri';
const msg = await invoke('greet', { name: '世界' });

几个关键提醒

首次编译耗时：Rust 在第一次编译时会下载许多依赖并编译整个项目，可能需要几分钟，这是正常现象，后续会快很多。
系统依赖：Windows 上需要 WebView2 运行时（Win11 已内置，Win10 通过安装程序自动处理）；macOS 自带 WKWebView；Linux 需要 webkit2gtk 等包（按官方文档安装）。
图标：tauri init 默认生成一张临时图标，正式发布前要替换为你的应用图标（按规范生成不同尺寸）。

手动接入 Tauri 的本质，就是在已有的前端项目外包裹一个 Rust 的控制层——工作量主要集中在一开始的配置，后续开发体验和纯前端几乎一致。