Vite + Tauri 2 一套配置同时搞定桌面开发、调试体验、iOS 真机联调（Vite 5.4.8）

1、Checklist：这三条不做到位一定踩坑

frontendDist 指向 ../dist（构建产物目录）
devUrl 的端口必须和 Vite server.port 一致，并且要 strictPort: true
iOS 真机调试时，Vite 的 server.host 要优先使用 process.env.TAURI_DEV_HOST（Tauri 会告诉你它期望的 host）

2、package.json：给 Tauri CLI 留好"钩子脚本"

假设你的脚本是这样（非常标准）：

json 复制代码

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

Tauri CLI 会通过 beforeDevCommand/beforeBuildCommand 去调用这些脚本，实现"一条命令启动整套链路"。

3、src-tauri/tauri.conf.json：把 dev server 和 dist 接到 Tauri

把 build 段配置成下面这样：

json 复制代码

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

这里的逻辑非常清晰：

cargo tauri dev 时：先跑 npm run dev（起 Vite），再让 Tauri 窗口加载 devUrl
cargo tauri build 时：先跑 npm run build（出 dist），再把 ../dist 打进应用包

4、vite.config.js：关键中的关键（移动端、HMR、调试体验都靠它）

这份配置建议你直接复制，然后按你项目微调：

arduino 复制代码

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,

    // iOS 真机等场景下，Tauri 会设置 TAURI_DEV_HOST，让 dev server 绑定到正确的内网 IP
    host: host || false,

    // 如果是移动端/非 localhost，HMR websocket 也要跟着走正确 host
    hmr: host
      ? {
          protocol: 'ws',
          host,
          port: 1421,
        }
      : undefined,

    watch: {
      // 避免 Vite 监听 src-tauri 导致不必要的重启/文件句柄压力
      ignored: ['**/src-tauri/**'],
    },
  },

  // 这些前缀的环境变量会暴露到 import.meta.env，便于按平台/调试状态切换
  envPrefix: ['VITE_', 'TAURI_ENV_*'],

  build: {
    // Windows WebView2 更接近 Chromium，macOS/Linux 更贴近 WebKit，目标做一点区分更稳
    target:
      process.env.TAURI_ENV_PLATFORM == 'windows'
        ? 'chrome105'
        : 'safari13',

    // Debug 构建不压缩，利于调试；Release 再压缩
    minify: !process.env.TAURI_ENV_DEBUG ? 'esbuild' : false,

    // Debug 构建产出 sourcemap，配合 DevTools 排错很爽
    sourcemap: !!process.env.TAURI_ENV_DEBUG,
  },
});

这份配置解决了 5 个常见痛点：

Rust 报错不被刷掉（clearScreen: false）
devUrl 与 Vite 端口完全一致（避免窗口白屏）
端口固定（避免"Vite 自动换端口，Tauri 仍加载旧端口"）
iOS 真机/内网开发可用（TAURI_DEV_HOST）
监听忽略 src-tauri（避免 watch 过多带来的卡顿和 EMFILE）

5、你最终的工作流：两条命令走天下

开发（会自动启动 Vite 并打开窗口）：

复制代码

cargo tauri dev

打包（会先 build 前端，再打包应用）：

复制代码

cargo tauri build

6、常见坑速查（特别实用）

窗口白屏但终端没报错

先看这三项：
1. devUrl 端口是否等于 vite server.port
2. 是否少了 strictPort: true 导致 Vite 换端口
3. frontendDist 是否真的指向 build 产物目录（通常 ../dist）
iOS 真机连不上 dev server / HMR 不工作

几乎都是 host 没按 TAURI_DEV_HOST 绑定，或 HMR 仍指向 localhost。把上面的 host/hmr 配置照抄基本就好了。
前端一改动就触发奇怪的重启/卡顿

多半是 watch 到了 src-tauri，加上 ignored: ['**/src-tauri/**'] 会立刻安静很多。