直接修改 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。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 解决方法：让 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="...>%20%E4%B8%AD%E7%9A%84%20URL%EF%BC%8C%E9%82%A3%E4%BA%9B%E8%B7%AF%E5%BE%84%E7%94%B1%20Rollup%20%E7%9A%84%20output%20%E8%A7%84%E5%88%99%E5%92%8C%20Vite%20%E7%9A%84%20base%20%E9%85%8D%E7%BD%AE%E5%85%B1%E5%90%8C%E5%86%B3%E5%AE%9A
%0A
• %E5%A6%82%E6%9E%9C%E4%BD%A0%E5%8F%91%E7%8E%B0%20HTML%20%E9%87%8C%E5%BC%95%E7%94%A8%E7%9A%84%E8%B7%AF%E5%BE%84%E4%B8%8D%E5%AF%B9%EF%BC%8C%E4%BC%98%E5%85%88%E6%A3%80%E6%9F%A5%20build.base%EF%BC%88%E9%83%A8%E7%BD%B2%E5%89%8D%E7%BC%80%EF%BC%89%E5%92%8C%20build.rollupOptions.output%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF%E6%8F%92%E4%BB%B6%E7%9A%84%20inject
%0A

%0A%0A

%E7%9C%9F%E6%AD%A3%E5%AE%B9%E6%98%93%E8%A2%AB%E5%BF%BD%E7%95%A5%E7%9A%84%E6%98%AF%20assetFileNames%20%E7%9A%84%E5%8C%B9%E9%85%8D%E9%A1%BA%E5%BA%8F%EF%BC%9A%E5%AE%83%E5%AF%B9%E6%AF%8F%E4%B8%AA%E8%B5%84%E6%BA%90%E5%8F%AA%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1%EF%BC%8C%E4%B8%94%E6%B2%A1%E6%9C%89%20fallback%20%E6%9C%BA%E5%88%B6%E3%80%82%E4%B8%80%E6%97%A6%E6%9F%90%E4%B8%AA%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6%E5%90%8D%E5%B8%A6%E6%9F%A5%E8%AF%A2%E5%8F%82%E6%95%B0%EF%BC%88%E5%A6%82%20logo.png?v=1.2.3%EF%BC%89%EF%BC%8CfileName.endsWith('.png')%20%E5%B0%B1%E4%BC%9A%E5%A4%B1%E8%B4%A5%E2%80%94%E2%80%94%E5%BE%97%E7%94%A8%20path.extname(assetInfo.name)%20%E6%88%96%E6%AD%A3%E5%88%99%E6%8F%90%E5%8F%96%E5%90%8E%E7%BC%80%E3%80%82

%0A">

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！