在 vite 中配置多页面应用，核心做法是在 vite.config.js 中使用 rollupinput 选项传入一个包含多个入口文件的对象，并为每个入口指定对应的 html 模板和输出文件名。这样 vite 会自动为每个页面生成独立的构建产物，实现多页应用的打包。
如何定义多个入口文件并关联各自的 HTML 模板？
通过配置 build.rollupOptions.input 对象来定义多个入口，Vite 会根据键名自动查找对应的 HTML 文件作为模板。例如，定义 index 和 about 两个入口，Vite 会分别读取 src/index.html 和 src/about.html 进行构建。
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
build: {
rollupOptions: {
input: {
index: path.resolve(__dirname, 'src/index.html'),
about: path.resolve(__dirname, 'src/about.html'),
},
},
},
});运行 npx vite build 后，会在 dist 目录下生成 index.html 和 about.html 两个文件，以及各自对应的 JS 和 CSS 资源。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
多页面之间如何共享公共代码以避免重复打包？
Vite 默认使用 Rollup 进行打包，可以通过配置 build.commonjsOptions 或使用插件来优化公共代码提取。更直接的方式是利用 Rollup 的 manualChunks 功能，将第三方库或公共模块单独打包成一个 chunk，从而在多个页面间共享。
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
build: {
rollupOptions: {
input: {
index: path.resolve(__dirname, 'src/index.html'),
about: path.resolve(__dirname, 'src/about.html'),
},
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor';
}
},
},
},
},
});上述配置会将所有 node_modules 中的依赖打包成名为 vendor 的公共 chunk，多个页面引用同一个 vendor.js，减少重复加载。
当某个入口文件不存在时 Vite 会如何处理？
如果 build.rollupOptions.input 中指定的 HTML 模板文件路径不存在，Vite 在启动开发服务器或执行构建时会直接报错，提示找不到该文件。例如，若配置了 contact 入口但 src/contact.html 未创建，控制台会显示类似 Could not resolve entry module "src/contact.html" 的错误，导致构建失败。因此，必须确保所有配置的入口文件实际存在，且路径正确。
