在 vite 中配置多入口，需要在 vite.config.js 中将 build.rollupoptions.input 设置为一个包含多个键值对的对象，其中键名作为输出目录名，值为对应的 html 文件路径。这样构建时会自动为每个入口生成独立的 js 和 css 文件，并创建对应的 html 页面。
如何定义具体的入口文件和输出目录
通过给 input 对象添加不同的键值对，可以分别指定主页、子页或独立模块的入口。例如，将 index 映射到 src/index.html，将 dashboard 映射到 src/dashboard.html。构建后，Vite 会在 dist 目录下生成 index 和 dashboard 两个文件夹，每个文件夹内包含该页面的 HTML 及对应的资源文件。
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
build: {
rollupOptions: {
input: {
index: path.resolve(__dirname, 'src/index.html'),
dashboard: path.resolve(__dirname, 'src/dashboard.html')
}
}
}
});
多入口下的公共代码如何处理
Vite 基于 Rollup 进行打包，默认会自动提取多入口之间的公共代码。当多个入口引用了相同的依赖（如 React 或 Vue）时，Rollup 会识别这些共享模块，并将其提取为单独的 chunk 文件。这避免了在每个页面的 JS 文件中重复打包相同的库代码，从而减小总体体积并提高缓存命中率。
// src/main.js (被 index.html 和 dashboard.html 共同引用)
import React from 'react';
console.log('Shared logic');
// 构建结果示例:
// dist/index/index.html
// dist/index/assets/index-xxxx.js
// dist/dashboard/dashboard.html
// dist/dashboard/assets/dashboard-xxxx.js
// dist/assets/react-xxxx.js (公共提取)
如果某个入口不需要引入公共样式怎么办
每个入口的 HTML 文件及其对应的 JS 入口是独立的。如果在 src/dashboard.html 对应的入口脚本中没有 import 全局样式文件，那么该页面就不会加载这些样式。可以通过在不同入口脚本中按需引入组件和样式来实现差异化。例如，index.js 引入通用布局样式，而 dashboard.js 只引入仪表盘特有的样式，从而实现样式的隔离与复用。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
