Vite

Vite 是一个构建工具，旨在为现代 Web 项目提供 更快、更精简的开发体验。

本指南基于 Vite 5.4.8 版本。 ([Tauri][1])

检查清单（Checklist）

在将 Vite 前端项目 与 Tauri 集成时，需要注意以下配置：

在 src-tauri/tauri.conf.json 中使用：

../dist

作为 frontendDist。

如果应用运行在 真实 iOS 设备 上，需要使用：

process.env.TAURI_DEV_HOST

作为开发服务器的 host IP 地址。 ([Tauri][1])

示例配置（Example configuration）

1 更新 Tauri 配置

假设你的 package.json 中包含以下脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "tauri": "tauri"
  }
}

可以通过 Tauri CLI hooks 自动运行 Vite 脚本。

`src-tauri/tauri.conf.json`

示例配置：

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

配置说明：

beforeDevCommand 在运行 tauri dev 前执行命令
beforeBuildCommand 在 tauri build 前执行命令
devUrl 前端开发服务器地址
frontendDist 前端构建输出目录。 ([Tauri][1])

如果使用不同包管理器：

Yarn

{
  "build": {
    "beforeDevCommand": "yarn dev",
    "beforeBuildCommand": "yarn build",
    "devUrl": "http://localhost:5173",
    "frontendDist": "../dist"
  }
}

pnpm

{
  "build": {
    "beforeDevCommand": "pnpm dev",
    "beforeBuildCommand": "pnpm build",
    "devUrl": "http://localhost:5173",
    "frontendDist": "../dist"
  }
}

Deno

{
  "build": {
    "beforeDevCommand": "deno task dev",
    "beforeBuildCommand": "deno task build",
    "devUrl": "http://localhost:5173",
    "frontendDist": "../dist"
  }
}

2 更新 Vite 配置

修改文件：

vite.config.js

示例配置：

import { defineConfig } from 'vite';

const host = process.env.TAURI_DEV_HOST;

export default defineConfig({
  // 防止 Vite 清除 Rust 错误输出
  clearScreen: false,

  server: {
    // 确保该端口与 tauri.conf.json 中 devUrl 的端口一致
    port: 5173,

    // Tauri 需要固定端口
    strictPort: true,

    // 如果设置了 host，则使用该 host
    host: host || false,

    hmr: host
      ? {
          protocol: 'ws',
          host,
          port: 1421,
        }
      : undefined,

    watch: {
      // 忽略 src-tauri 目录
      ignored: ['**/src-tauri/**'],
    },
  },

  // 这些环境变量前缀可以在客户端代码中通过 import.meta.env 访问
  envPrefix: ['VITE_', 'TAURI_ENV_*'],

  build: {
    // Windows 使用 Chromium
    // macOS 和 Linux 使用 WebKit
    target:
      process.env.TAURI_ENV_PLATFORM == 'windows'
        ? 'chrome105'
        : 'safari13',

    // Debug 构建不进行 minify
    minify: !process.env.TAURI_ENV_DEBUG ? 'esbuild' : false,

    // Debug 构建生成 sourcemap
    sourcemap: !!process.env.TAURI_ENV_DEBUG,
  },
});

配置说明：

`clearScreen`

clearScreen: false

避免 Vite 清除 Rust 编译错误输出。

`strictPort`

strictPort: true

Tauri 需要 固定端口。

如果端口不可用，则会报错。

`watch.ignored`

ignored: ['**/src-tauri/**']

让 Vite 忽略监听 src-tauri 目录。

`envPrefix`

['VITE_', 'TAURI_ENV_*']

允许前端代码访问 Tauri CLI 注入的环境变量。

`build.target`

Tauri WebView 的浏览器引擎：

平台	WebView
Windows	Chromium
macOS	WebKit
Linux	WebKit

因此需要指定对应的 JavaScript 构建目标。 ([Tauri][1])

总结

使用 Vite + Tauri 的典型开发流程：

开发模式

npm run dev
      ↓
Vite Dev Server
      ↓
http://localhost:5173
      ↓
tauri dev
      ↓
桌面应用

构建模式

npm run build
      ↓
dist/
      ↓
tauri build
      ↓
桌面应用

架构理解

Vite + Tauri 实际运行结构：

Vue / React / Svelte
        ↓
Vite Build
        ↓
HTML + CSS + JS
        ↓
Tauri WebView
        ↓
Rust Backend

Tauri 本质上只是 Web UI 的 Native Container。 ([Tauri][2])

💡结合你前面在研究 IM 多端客户端（Web → Desktop → Mobile），这一页其实透露了 Tauri 最重要的工程实践：

Tauri 官方推荐：

Vue / React
     +
Vite
     +
Tauri

原因是：

Vite dev server 与 tauri dev 天然适配
HMR 热更新非常稳定
Vue / React / Svelte 都默认支持

参考资料

Vite
检查清单（Checklist）
示例配置（Example configuration）
- 1 更新 Tauri 配置
2 更新 Vite 配置
总结
- 开发模式
- 构建模式
架构理解
参考资料

Tauri 2.0-07-Vite