在 Tauri 项目中集成 Vite，本质上是把 Vite 作为前端构建工具，通过 Tauri 的 CLI 协调开发与打包。下面是你需要知道的核心适配要点，避免踩坑。
1. Vite 构建适配
Tauri 默认推荐使用 Vite 作为前端构建工具，因为它启动快、HMR（热模块替换）丝滑，且天然支持 TypeScript、JSX 等。适配主要做两件事：
- 初始化项目时自动配置
使用 create-tauri-app 创建项目时，选择 Vite 作为构建方案，它会自动生成 vite.config.ts 并将脚本写入 package.json，无需手动调整。
- 自定义 Vite 配置
如果已有 Vite 项目，手动添加 Tauri 依赖后，只需确保构建产物输出到 Tauri 期望的目录（默认是 ../dist），并在 tauri.conf.json 里指定：
"build": {
"devPath": "http://localhost:5173",
"distDir": "../dist"
}
Vite 启动开发服务器后，Tauri 的 WebView 会加载 devPath 地址，实现热更新；生产构建则自动读取 distDir 下的静态文件。
- HMR 与 WebView 的兼容性
开发时 WebView 会直接请求 Vite 开发服务器的地址，跨域和 WebSocket 由 Vite 处理，无需任何额外代理配置。连接稳定，修改样式或组件即时反映。
2. 路径处理
前端代码里引用静态资源（如图片、字体、JSON 数据）时，路径问题极易在打包后岔劈。遵循这几点即可：
- 使用相对路径
Vite 打包时，import 引入的资源会被自动处理（打上哈希、放到 assets 目录）。若用 new URL('./img/logo.png', import.meta.url) 方式引用，会得到打包后的绝对路径，完全安全。
- 绝对路径陷阱
不要在前端代码里用 / 开头的绝对路径去加载静态文件（如 /logo.png），因为在开发模式这种路径会指向 Vite 服务器的根目录，但在生产 Tauri 打包后，前端运行在 tauri://localhost 或自定义协议下，绝对路径会失效。正确做法是使用 import 或 import.meta.url 生成路径。
- Rust 侧读取本地文件
如果需要加载本地文件系统中的图片（比如来自磁盘的文件），应通过 Tauri 命令在后端读取并转为 Base64 或二进制传给前端，前端用 blob: URL 或直接赋值 src。避免前端直接使用 file:// 协议（被安全策略阻止）。
3. 静态资源配置
Tauri 应用最终的静态资源是 Vite 构建出的 index.html 及其引用的 JS/CSS/资源文件。配置要点：
public目录
Vite 的 public 目录下的文件会被原样复制到 dist 根目录，适合放置不会被代码直接 import 的纯静态文件（如 favicon.ico、robots.txt）。但要注意：这里面的文件在生产环境中引用时，必须像这样写：/favicon.ico（如要兼容，可用 import.meta.env.BASE_URL 拼接）。
base配置
默认的 base: '/' 通常就够用，因为 Tauri 会用自定义协议直接加载文件，不涉及服务器子路径。不要随意把 base 设成 '/my-app/' 这样的路径，否则打包后资源会找不到。
- 多页面应用
如果前端有多个入口（如登录页、主窗口），可以通过 Vite 的多页面配置实现，然后 Tauri 根据不同窗口加载对应的 HTML 文件。需在 tauri.conf.json 的 build 中额外指定 devPath 和 distDir 的对应关系，通常使用环境变量或命令行参数区分。
4. 常见问题速查
- 开发时白屏：检查
tauri dev命令是否先启动了 Vite 服务器（beforeDevCommand里配置npm run dev），以及devPath端口是否正确。 - 打包后资源 404：多半是路径用了绝对路径
/或base设置错误，改用相对引入或import.meta.url。 - 字体跨域错误：WebView 对字体资源有更严格的跨域限制，确保字体通过
import引入，或用new URL生成，不要从 CDN 加载。
一句话要点：Vite 负责构建优化和开发体验，Tauri 只关心最终的静态文件目录。路径上坚持“能 import 就 import，避免裸字符串绝对路径”，就能顺畅打通两边的协作。