vite 中静态资源默认按来源区别处理：public/ 下文件直复制无处理；模块导入的小文件（≤4kb）转 base64，大文件带 hash 输出至 dist/assets/；可通过 build.assetsdir 和 assetfilenames 自定义路径与命名；html 硬编码路径须对应 public/，动态路径需改用 import.meta.glob；禁用内联设 assetsinlinelimit: 0。
在 Vite 中，生产环境的静态资源（如图片、字体、JSON、SVG 等）默认会被自动处理并内联或复制到 dist 目录，但具体行为取决于资源类型、引用方式和配置。关键在于理解 Vite 的资源解析规则，并按需调整。
静态资源的默认处理逻辑
Vite 对不同来源的静态资源有明确区分：
-
放在
public/目录下的文件：直接复制到dist/根目录，不经过构建处理（无 hash、不压缩、不转 base64），适合 favicon、robots.txt、第三方 CDN 回退资源等。 -
通过模块导入的资源（如
import img from './logo.png'）：Vite 将其视为模块资产（asset），默认进行以下处理：- 小文件（≤ 4kb）自动转为 base64 data URL；
- 大文件生成带 hash 的文件名（如
logo.abc123.png），输出到dist/assets/； - 支持 CSS 中的
url()、JS 中的new URL('./xxx', import.meta.url)等合法引用方式。
控制资源输出路径与命名
可通过 vite.config.ts 中的 build.assetsDir 和 build.rollupOptions.output.assetFileNames 自定义：
-
assetsDir: 'static'→ 把所有构建生成的资源（非 public）放到dist/static/下； -
assetFileNames: 'static/[name].[hash][extname]'→ 指定文件名模板（注意：Vite 5+ 推荐用[name]-[hash:8][extname]风格）； - 对字体或 SVG 单独设置：用正则匹配后指定子目录，例如：
{ test: /\.(woff|woff2|eot|ttf|otf)$/i, fileName: 'fonts/[name].[hash:8][extname]' }
避免资源被错误处理或遗漏
常见问题及应对：
-
HTML 中硬编码的路径（如
<img src="/logo.png">）：必须确保该文件在public/下，否则生产构建时 404； -
动态拼接路径（
src = '/img/' + name + '.png'）：Vite 无法静态分析，不会打包对应资源 → 应改用import.meta.glob或提前导入映射表； -
第三方库自带的静态资源未被识别：检查是否使用了非标准引用方式；必要时用
rollup-plugin-copy手动拷贝； -
希望禁用 base64 内联：设
build.assetsInlineLimit: 0，所有资源都输出为独立文件。
验证构建结果
运行 npx vite build 后检查 dist/ 目录结构：
-
dist/index.html中的资源链接是否正确（相对路径、带 hash 还是 public 路径）； -
dist/assets/是否包含预期的图片、字体等（注意是否有重复或漏掉）； - dist/index.html（建议用
npx serve -s dist），查看 Network 面板确认资源加载状态和 MIME 类型。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
