Vite 与构建配置要点

前面几章（React、Vue、Svelte 都是如此）其实都在用同一个工具：Vite。它是目前最主流的现代前端构建工具，做两件事——开发时提供一个带热更新的本地服务器，发布时把源码打包成静态文件。Tauri 并不绑定 Vite，但官方对 React/Vue/Svelte 等 SPA 框架都推荐用它。本章把 Vite 在 Tauri 里的关键配置一次讲透，去实战化，只讲机制和最小可运行片段。

Vite 在 Tauri 流程里的两个角色

理解配置前，先看清 Vite 在 Tauri 生命周期里的位置。开发模式下，Tauri 不自己编译前端，而是启动一个「前端开发命令」（如 npm run dev），这个命令背后就是 Vite 起了一个本地服务器；Tauri 再通过 devUrl 把这个网址加载进 WebView。发布模式下，Tauri 先跑「前端构建命令」（如 npm run build），Vite 把源码打包进某个目录，Tauri 再通过 frontendDist 把这个目录作为静态资源嵌进安装包。

所以 Vite 和 tauri.conf.json 是两个齿轮，咬不咬合决定能不能跑起来。下面逐条对齐。

dist 输出目录：frontendDist 要对上

Vite 默认把构建产物输出到项目根目录下的 dist/。你的 tauri.conf.json 里 build.frontendDist 必须指向这个目录，且路径是相对于 src-tauri/ 的，所以要写 ../dist：

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

如果你的框架把产物放到别的目录（比如 SvelteKit 用 adapter-static 后是 build/），这里就要改成 ../build。路径写错，构建出的安装包会找不到界面，打开是空白。

开发端口：必须和 devUrl 完全一致

这是最容易翻车的地方。Tauri 开发模式靠 devUrl 这个固定网址找前端，而 Vite 默认端口是「自动分配」的——5173 被占就跳 5174。一旦端口飘了，Tauri 仍去连 5173，自然连不上。

解决办法是在 vite.config 里把端口写死，并开 strictPort（端口被占用直接报错，而不是偷偷换端口）：

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  // 阻止 Vite 清屏，避免覆盖 Rust 编译日志
  clearScreen: false,
  server: {
    // 这个端口必须和 tauri.conf.json 的 devUrl 端口一致
    port: 5173,
    strictPort: true,
  },
});

devUrl 写 http://localhost:5173，server.port 就必须是 5173。两边不一是最常见的开发模式白屏原因。

让 Vite 忽略 Rust 目录

src-tauri/ 里是 Rust 代码，Vite 的「文件监听（watch）」没必要盯着它——盯着既浪费性能，也可能在 Rust 重新编译时误触发前端重载。加一行忽略规则：

// vite.config.ts（接上）
export default defineConfig({
  server: {
    port: 5173,
    strictPort: true,
    watch: {
      ignored: ['**/src-tauri/**'],
    },
  },
});

构建目标与移动端变量

Tauri 在不同平台用的内核不一样：Windows 上是 Chromium 内核，macOS/Linux 上是 WebKit。因此官方建议给 Vite 的 build.target 按平台指定，保证新语法能被正确转换。再配合 envPrefix，让以 VITE_ 或 TAURI_ENV_* 开头的环境变量能暴露给前端代码（通过 import.meta.env 读取）：

// vite.config.ts（接上）
export default defineConfig({
  // 只有这些前缀的环境变量会暴露给前端源码
  envPrefix: ['VITE_', 'TAURI_ENV_*'],
  build: {
    // Windows 用 Chromium，其它用 WebKit
    target:
      process.env.TAURI_ENV_PLATFORM === 'windows'
        ? 'chrome105'
        : 'safari13',
    // 调试构建不压缩，方便看源码
    minify: !process.env.TAURI_ENV_DEBUG ? 'esbuild' : false,
    sourcemap: !!process.env.TAURI_ENV_DEBUG,
  },
});

CORS 与代理：多数情况不用管

很多新手会担心「前后端跨域（CORS，Cross-Origin Resource Sharing）」。在 Tauri 里，前端页面由本地 WebView 直接加载，调用 Rust 走的是 Tauri 自带的 IPC 通道，不经过浏览器网络层，所以默认不存在跨域问题，你不需要为 invoke 配 CORS。

什么场景才需要代理？当你要访问「外部 HTTP 接口」且对方限制了请求来源时。这时可以用 Vite 的 server.proxy 把请求转发到目标服务器，让前端像访问本地地址一样访问外部 API：

// vite.config.ts（仅外部接口受限时需要）
export default defineConfig({
  server: {
    port: 5173,
    strictPort: true,
    proxy: {
      // 把 /api 开头的请求代理到真实后端
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
      },
    },
  },
});

一个完整的 vite.config 片段

把上面要点合在一起，最稳妥的 vite.config.ts 长这样（以 Vite 5.x 为准）：

// vite.config.ts
import { defineConfig } from 'vite';

const host = process.env.TAURI_DEV_HOST;

export default defineConfig({
  clearScreen: false,
  server: {
    port: 5173,
    strictPort: true,
    host: host || false,
    hmr: host
      ? { protocol: 'ws', host, port: 1421 }
      : undefined,
    watch: {
      ignored: ['**/src-tauri/**'],
    },
  },
  envPrefix: ['VITE_', 'TAURI_ENV_*'],
  build: {
    target:
      process.env.TAURI_ENV_PLATFORM === 'windows'
        ? 'chrome105'
        : 'safari13',
    minify: !process.env.TAURI_ENV_DEBUG ? 'esbuild' : false,
    sourcemap: !!process.env.TAURI_ENV_DEBUG,
  },
});

其中 TAURI_DEV_HOST 只在用真机调试 iOS 时才需要设置，平时留空即可。

小结

Vite 与 Tauri 的配置对接可以记成四句话：frontendDist 指向 Vite 的产物目录（默认 ../dist）；server.port 与 devUrl 端口必须一致且开启 strictPort；用 watch.ignored 排除 src-tauri/；invoke 调 Rust 不受 CORS 限制，只有访问外部接口受限时才用 server.proxy（且仅开发模式有效）。把这四个点钉死，前端构建链路就稳了。