直接修改 build.rollupOptions.output 即可控制 HTML 资源输出位置，vite-plugin-html 仅负责模板渲染与注入；assetFileNames 必须同步执行，禁止异步操作；多页项目需对齐 HTML 入口与 JS/CSS 输出路径；public 资源不受其影响；inject 不改变资源路径，仅影响 HTML 内容。
直接改 build.rollupOptions.output 就能控制 HTML 对应资源的输出位置，不需要写插件——vite-plugin-html 只负责 HTML 模板渲染和注入，不干预资源路径。
assetFileNames 函数必须返回字符串，不能返回 Promise
常见错误是误在 assetFileNames 里调用异步逻辑（比如读文件、请求 API），导致打包卡死或路径生成失败。Rollup 要求这个函数同步执行。
- ✅ 正确做法：只做后缀判断、字符串匹配、正则提取等纯同步操作
- ❌ 错误示例：
assetFileNames: async (info) => { const meta = await getMeta(info.name); return `assets/${meta.type}/${info.name}`; } - 如果真需要动态元信息，得提前在
build.rollupOptions.plugins中用generateBundle钩子预处理，再把结果挂到bundle上供assetFileNames读取
多页面项目中，HTML 入口与 JS/CSS 输出路径要对齐
当你用 vite-plugin-html 配置多个页面（如 pages: { admin: { entry: 'src/admin/main.js' } }），但没同步调整 entryFileNames，就会出现 admin/index.html 里引用的 JS 路径指向 /js/xxx.js，而实际文件却在 /admin/js/xxx.js —— 浏览器 404。
- 解决方法：让
entryFileNames和chunkFileNames包含目录层级，例如'[name]/js/[name].[hash].js' - 注意：这里的
[name]是 chunk 名，不是页面名；若需按页面隔离，得配合build.rollupOptions.input动态设置入口，并用output.dir控制输出根目录 -
public下的静态资源（如favicon.ico）不受assetFileNames影响，它直接复制到dist根目录
vite-plugin-html 的 inject 不影响资源路径，只影响 HTML 内容
很多人以为配置了 inject: { title: 'My App' } 就能改变 JS 加载路径，其实它只是往 EJS 模板里插入变量，跟资源输出结构完全无关。
立即学习“前端免费学习笔记（深入）”；
-
vite-plugin-html的作用域仅限于 HTML 文件内容生成：压缩、模板渲染、变量注入、script/style 标签自动插入 - 它不会修改
<script src="...>中的 URL，那些路径由 Rollup 的output规则和 Vite 的base配置共同决定 - 如果你发现 HTML 里引用的路径不对，优先检查
build.base（部署前缀）和build.rollupOptions.output，而不是插件的inject
真正容易被忽略的是 assetFileNames 的匹配顺序：它对每个资源只执行一次，且没有 fallback 机制。一旦某个图片文件名带查询参数（如 logo.png?v=1.2.3），fileName.endsWith('.png') 就会失败——得用 path.extname(assetInfo.name) 或正则提取后缀。
