最简可靠方式是在 vite.config.ts 中配置 build.rollupoptions.input 指向多个 .html 文件路径；vite 以 html 为入口单位，每个 index.html 构成独立页面上下文，含自身脚本、资源和挂载点，rollup 由此分析依赖生成对应产物。
直接在 vite.config.ts 里配置 build.rollupOptions.input，指向多个 HTML 文件路径，是最简、最可靠的方式。Vite 以 HTML 为入口单位，不是 JS 文件 —— 这点和 Webpack 不同，别写成 main.ts 路径。
入口必须是 .html 文件
Vite 的多页构建逻辑基于 HTML 模板：每个 index.html 是一个完整页面上下文，含自己的 <script type="module"></script>、资源引用、标题和挂载点。Rollup 会从它开始分析依赖，生成对应 JS/CSS/asset。
- ✅ 正确写法：
path.resolve(__dirname, 'src/pages/home/index.html') - ❌ 错误写法：
'src/pages/home/main.ts'（没 HTML 模板，开发时无法访问/home/路由，部署后也缺结构）
目录结构建议按页面平铺
把每个页面放在独立子目录下，保持 HTML、main.ts、App.vue、public 等自包含：
src/ ├── pages/ │ ├── home/ │ │ ├── index.html │ │ ├── main.ts │ │ └── App.vue │ ├── about/ │ │ ├── index.html │ │ ├── main.ts │ │ └── App.vue
这样既利于开发时本地预览（访问 localhost:5173/about/ 自动命中 about/index.html），也方便构建时精准控制输入。
配置示例（vite.config.ts）
用 path.resolve 显式声明每个 HTML 入口，避免路径错误：
import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
build: {
rollupOptions: {
input: {
home: resolve(__dirname, 'src/pages/home/index.html'),
about: resolve(__dirname, 'src/pages/about/index.html'),
contact: resolve(__dirname, 'src/pages/contact/index.html')
}
}
}
});
执行 vite build 后，dist 中会生成对应三份独立产物：home/index.html、about/index.html 等，资源自动去重、按需分割。
进阶：支持命令行动态指定页面
若项目页面较多，不想每次改 config，可用脚本参数切换入口：
- 在
package.json加命令："build:admin": "vite build --app=admin" - vite.config.ts 中读取：
const app = process.argv.find(arg => arg.startsWith('--app='))?.split('=')[1] || 'home'; - 然后动态设置
input和root，例如：root: `src/pages/${app}`，input: resolve(__dirname, `src/pages/${app}/index.html`)
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
