在 vite 项目中处理静态资源，核心策略是将它们放置在 `public` 目录或 `src/assets` 目录中，并通过不同的引用方式让构建工具自动处理。对于不需要被代码直接引用、只需原样复制的文件（如 favicon、robots.txt），应放在 `public` 目录下，并在代码中使用以 `/` 开头的绝对路径引用；对于需要被模块系统导入、可能涉及压缩转换或类型检查的资源（如图片、svg、字体），应放在 `src/assets` 目录下，并通过 es module 的 import 语句引入，vite 会自动将其打包并生成哈希文件名。
哪些文件应该放在 public 目录
放在 `public` 目录下的文件会被原封不动地复制到构建输出的根目录，Vite 不会对这些文件进行任何编译、压缩或重命名操作。这种处理方式适用于那些不通过 JavaScript 动态加载、或者无法通过 import 语句引用的静态资产。例如，网站的图标文件 `favicon.ico`、搜索引擎爬虫协议 `robots.txt` 以及某些第三方 SDK 要求的特定配置文件。开发者在引用这些文件时，必须使用相对于项目根目录的绝对路径，即路径必须以 `/` 开头，这样 Vite 的开发服务器和生产构建才能正确解析到这些文件。
<!-- index.html --> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
上述代码展示了如何在 HTML 中引用 `public` 目录下的 SVG 图标。当 Vite 启动开发服务器或执行生产构建时，`/favicon.svg` 会被直接映射到 `public/favicon.svg`。如果将文件放入 `src` 目录而不使用 import，Vite 将无法在最终产物中找到它，导致 404 错误。因此，判断标准很简单：如果这个文件是“配置型”或“全局静态型”且不需要 JS 逻辑介入，就放 `public`；如果需要被 JS 代码读取、处理或作为组件的一部分，就放 `assets`。
立即学习“Java免费学习笔记（深入）”；
哪些文件应该放在 src/assets 目录
`src/assets` 目录中的资源被视为模块依赖，Vite 会通过 Rollup 插件链对它们进行处理。这意味着图片可能会被压缩，SVG 可能被转换为 React/Vue 组件，字体文件会被重新打包并添加内容哈希。这种方式的优势在于安全性（防止路径泄露）和性能优化（自动压缩和缓存）。开发者通过标准的 ES6 import 语法将这些资源引入 JavaScript 或 CSS 文件中。Vite 会分析这些导入关系，确保在构建时将资源移动到 `dist` 目录的正确位置，并替换代码中的引用路径为带有哈希值的最终路径。
// main.js
import logo from './assets/logo.png';
import icon from './assets/icon.svg?component';
const img = document.createElement('img');
img.src = logo;
document.body.appendChild(img);在上面的代码中，`logo.png` 被导入后，其值不再是原始路径，而是经过 Vite 处理后的最终 URL（例如 `/assets/logo.abc123.png`）。这确保了浏览器缓存的有效性。特别需要注意的是 `icon.svg?component` 这种写法，这是 Vite 特有的查询参数语法，它告诉 Vite 不要将 SVG 当作普通图片处理，而是将其转换为一个可渲染的 Vue 或 React 组件。如果不加 `?component`，SVG 将被当作二进制图片或数据 URI 处理。这种差异直接影响了代码的使用方式：前者返回一个字符串 URL，后者返回一个 JSX/VNode 对象。
如何处理不同格式资源的导入行为差异
在 `src/assets` 中，不同扩展名的文件会导致完全不同的导入结果和行为。理解这些差异对于避免运行时错误至关重要。默认情况下，Vite 将所有未知类型的静态资源视为“通用资产”，它们会被打包并返回一个 URL 字符串。但是，特定的 MIME 类型会触发特殊的处理逻辑。例如，JSON 文件默认会被解析为 JavaScript 对象，而不是返回 URL。CSS 文件可以直接导入，但通常用于提取样式而非获取路径。SVG 文件则处于中间地带，既可以作为图片 URL，也可以通过查询参数转为组件。
// json.json
{
"name": "vite",
"version": "5.0"
}// app.js import data from './data.json'; console.log(data.name); // 输出: vite import imgUrl from './image.jpg'; console.log(imgUrl); // 输出: /assets/image.xxxxx.jpg
第一段代码展示了 JSON 文件的特殊行为：导入它直接得到解析后的对象，无需手动调用 `JSON.parse()`。这对于配置项或本地化数据非常有用。第二段代码展示了普通图片的行为：导入得到的是构建后的 URL 字符串。如果开发者误以为 JSON 也会返回 URL，就会在尝试设置 `img.src = jsonData` 时遇到类型错误。此外，对于 TypeScript 用户，如果未配置相应的类型声明，直接导入非 TS 文件可能会报错。此时需要在 `env.d.ts` 中声明模块类型，或者使用 `?url` 后缀强制 Vite 返回 URL 字符串而非解析内容，例如 `import imgUrl from './image.jpg?url'`，这将覆盖默认的 JSON 解析行为（针对 .json）或确保一致性。
