vite原生支持多页面应用（mpa），只需在根目录创建多个html入口文件并配置build.rollupoptions.input显式声明，即可生成独立html及隔离资源；需注意base路径、public静态资源引用及可选vite-plugin-html动态注入。
Vite 默认是单页应用（SPA）构建模式，但通过简单配置也能支持多页面应用（MPA），即多个 HTML 入口、各自独立 JS/CSS 资源、互不干扰。核心在于显式声明多个 index.html 入口，并调整构建逻辑。
明确每个页面的入口 HTML 文件
Vite 会把项目根目录下（或指定目录中）的每个 .html 文件默认识别为一个入口。最常用方式是：在项目根目录创建多个 HTML 文件，如 admin.html、login.html、index.html 等，每个都包含自己的 <script type="module"></script> 引入对应主 JS 文件（例如 <script type="module" src="/src/admin/main.ts"></script>）。
不需要额外插件，Vite 2.0+ 原生支持多 HTML 入口 —— 只要文件存在且路径可访问，构建时就会为其生成独立的 chunk 和输出 HTML。
配置 build.rollupOptions.input 指定入口
更推荐显式声明入口，避免遗漏或误识别。在 vite.config.ts 中设置：
export default defineConfig({
build: {
rollupOptions: {
input: {
index: './index.html',
admin: './admin.html',
login: './login.html'
}
}
}
})
这样 Vite 构建时会分别处理这三个 HTML，输出对应三个独立页面，资源自动按入口隔离（JS/CSS 不共用，除非显式 import 共享模块）。
注意：input 的键名（如 index）会成为输出 HTML 文件名（dist/index.html），值为源 HTML 路径。
确保各页面资源路径正确（base 和 public）
如果部署到非根路径（如 /app/），需统一设置 base：
- 设
base: '/app/'，所有资源引用（CSS/JS/图片）将自动加上该前缀 - 静态资源放在
public/下（如public/logo.png），HTML 中直接写<img src="/logo.png">即可，无需改路径 - 若某页面需绝对路径引用（如后端模板嵌入），可用
process.env.BASE_URL（需搭配插件如vite-plugin-html注入）
可选：用 vite-plugin-html 自定义 HTML 注入
当需要动态注入 title、meta、环境变量或不同页面不同 script 标签时，可引入 vite-plugin-html：
import { injectHtml } from 'vite-plugin-html'
export default defineConfig({
plugins: [
injectHtml({
injectData: {
title: '后台管理',
description: '管理员操作界面'
}
})
]
})
然后在 admin.html 中使用 ，实现页面级元信息定制。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
