本文详解如何在 Vite 中配置多个独立 HTML 入口（如 index.html、about.html），使其构建后直接输出至 dist/ 根目录，而非默认的 dist/about/index.html 嵌套路径，并支持 JS 自动打包与资源关联。
本文详解如何在 vite 中配置多个独立 html 入口（如 `index.html`、`about.html`），使其构建后直接输出至 `dist/` 根目录，而非默认的 `dist/about/index.html` 嵌套路径，并支持 js 自动打包与资源关联。
在 Vite 默认行为中，HTML 文件若作为入口（entry），会被视为“页面入口”，但其构建输出路径由 Rollup 的 chunk 逻辑和 Vite 内部约定共同决定——通常会将 src/about.html 构建为 dist/about/index.html。而实际项目中（尤其是从 Gulp、Webpack 多页应用迁移而来），常需扁平化输出：src/about.html → dist/about.html，保持 URL 路径简洁且与静态服务兼容。
要实现该效果，关键在于显式声明多 HTML 入口 + 精确控制 Rollup 输出文件名映射。Vite 允许通过 build.rollupOptions.input 指定多个 HTML 入口文件（它们会被自动识别为 HTML+JS 混合入口），再结合 build.rollupOptions.output.entryFileNames（注意：此处命名易误解，实际影响的是 HTML 对应 JS bundle 的输出名）——但 HTML 本身输出路径需借助 build.rollupOptions.output.assetFileNames 和插件机制间接控制。不过，更可靠、简洁且符合 Vite 设计意图的方式是：利用 input 显式声明入口，并配合自定义插件重写 HTML 输出路径。
但根据官方实践与社区验证，一个轻量级、零插件的可行方案如下（适用于 Vite ≥ 4.0）：
// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
// ✅ 显式声明多个 HTML 入口文件（路径相对于项目根目录）
input: ['src/index.html', 'src/about.html', 'src/contact.html'],
// ⚠️ 注意：entryFileNames 控制的是 JS bundle 名称，不是 HTML 文件名
// 此处设为 '[name].js' 可确保每个 HTML 对应的 JS 输出为 index.js、about.js 等
output: {
entryFileNames: '[name].js',
// 可选：统一 CSS 输出名，避免 hash 冗余
assetFileNames: '[name].[ext]',
}
}
}
});✅ 配置生效前提：
立即学习“前端免费学习笔记（深入）”；
- 所有 HTML 文件必须包含 <script type="module" src="./xxx.js"> 或内联 <script>（Vite 会自动注入 HMR 逻辑并处理依赖）；</script>
- src/index.html 等文件中引用的 JS/CSS 路径需为相对路径（如 ./main.js），Vite 将自动解析并打包；
- 构建后，dist/ 下将生成：
dist/ ├── index.html ← 内联或引用 index.js ├── about.html ← 内联或引用 about.js ├── contact.html ← 内联或引用 contact.js ├── index.js ├── about.js ├── contact.js └── style.css
⚠️ 重要注意事项：
- output.entryFileNames 不控制 HTML 文件名，它只控制 JS bundle 的输出名。HTML 文件名始终由 input 中指定的路径 basename 决定（即 src/about.html → dist/about.html），这是 Vite 4+ 的默认行为；
- 若使用 public/ 目录存放纯静态 HTML（无 JS 打包需求），则这些文件会被原样拷贝，但无法享受模块解析、HMR、环境变量注入等能力；
- 如需进一步定制 HTML 输出（例如添加
、注入 CDN 资源、动态修改 title），推荐使用 vite-plugin-html 插件，它支持模板渲染与注入逻辑； - 禁用代码分割（避免生成 vendor-xxx.js 等 chunk）可追加配置：
build: { rollupOptions: { output: { manualChunks: undefined } } }
总结：Vite 原生支持多 HTML 入口扁平化输出，核心在于正确设置 rollupOptions.input 并理解其与输出路径的映射关系。无需复杂插件即可实现 src/*.html → dist/*.html 的直出结构，兼顾开发体验与生产部署灵活性。
