前端自由：UI 集成

前端自由：UI 集成

自选框架

Tauri 的核心理念之一是前端无关。这意味着 Tauri 不关心你使用 React、Vue、Svelte、Angular、Solid，还是纯粹的 vanilla HTML 和 JavaScript。只要它能编译成 HTML、JS 和 CSS，Tauri 就能运行它。

这让你能够坚持使用你已喜爱的工具，而无需学习特定的“Tauri UI”语言。

配置 tauri.conf.json

要将你的前端连接到 Tauri Rust 后端，你需要告诉 Tauri 两件事：你的开发服务器在哪里运行（用于开发），以及你的构建文件位于何处（用于生产）。这在 tauri.conf.json 文件的 build 部分中完成。

{
  "build": {
    // CLI 在 tauri build 之前运行的命令
    "beforeBuildCommand": "npm run build",
    // CLI 在 tauri dev 之前运行的命令
    "beforeDevCommand": "npm run dev",
    // 生产资产的位置（相对于 tauri.conf.json）
    "frontendDist": "../dist",
    // 你本地开发服务器的 URL
    "devUrl": "http://localhost:1420"
  }
}

在 Tauri v2 中，frontendDist 替换了旧的 distDir 配置，为不同的项目结构提供了更大的灵活性。

打造原生体验的样式

网页的行为与桌面应用不同。用户期望通过标题栏拖动窗口，但他们不期望高亮 UI 按钮的文本或在右键点击时看到浏览器上下文菜单。

1. 窗口拖动

要使自定义标题栏或头部可拖动，你不需要复杂的 JavaScript 事件监听器。Tauri 提供了一个特定的数据属性：data-tauri-drag-region。

<div data-tauri-drag-region class="titlebar">
  <h1>My App</h1>
</div>

当用户在此 div 内任意位置点击并按住时，操作系统会高效地处理窗口移动。

2. 禁用文本选择和缩放

为了防止你的应用感觉像一个网站，请将以下 CSS 应用到你的 body 或根元素。这可以阻止用户意外选择 UI 文本或将光标变为文本插入符号。

body {
  user-select: none;
  cursor: default;
}