vite可通过配置多个html入口支持多页应用（mpa）：在vite.config.js中通过rollupoptions.input声明各页面html路径，构建后生成独立html及对应资源；各页面js天然隔离，需各自引入主模块并避免全局污染；开发时可手动访问路径或配置重写规则实现多入口热更新；静态资源建议用相对路径或public目录统一管理。
Vite 默认以单页应用（SPA）模式构建，但通过简单配置也能高效支持多页应用（MPA）。核心思路是：为每个页面定义独立的 HTML 入口，并让 Vite 分别处理它们的资源依赖与构建输出。
配置多个 HTML 入口文件
Vite 本身不强制单入口，只要在 vite.config.js 中显式声明多个 HTML 文件作为入口，它就会为每个生成独立的 chunk 和 HTML 输出。
例如项目结构如下：
src/pages/
index/index.html
admin/admin.html
login/login.html
在配置中这样设置：
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
export default defineConfig({<br> build: {<br> rollupOptions: {<br> input: {<br> index: resolve(__dirname, 'src/pages/index/index.html'),<br> admin: resolve(__dirname, 'src/pages/admin/admin.html'),<br> login: resolve(__dirname, 'src/pages/login/login.html')<br> },<br> }<br> }<br>})
构建后，dist 目录会生成对应 HTML 文件，以及各自按需拆分的 JS/CSS 资源。
每个页面拥有独立的逻辑与路由
MPA 不共享 JavaScript 上下文，因此每个 HTML 应该有自己的初始化逻辑。推荐方式：
- 在各
index.html、admin.html中，用<script type="module"></script>引入专属主模块，如./index.ts、./admin.ts - 避免全局污染：不同页面的 JS 不自动共用状态或变量，天然隔离
- 若需复用代码（如工具函数、组件），可抽成
lib/或 npm 包，通过 ES 模块导入 - 前端路由由服务端控制：访问
/admin/返回admin.html，而非前端跳转
开发时支持多入口热更新
Vite 开发服务器默认只服务一个 HTML（通常是 index.html），要访问其他页面需手动指定路径，例如：
- 启动后访问
http://localhost:5173/admin/admin.html可加载 admin 页面 - 也可借助插件如 vite-plugin-html 或自定义中间件，在 dev 模式下映射路径（如
/admin/ → /admin/admin.html） - 更轻量的做法：在
vite.config.js中使用server.rewrite或server.middlewares.use添加重写规则
注意静态资源与公共路径
多页场景下，资源引用路径容易出错，建议统一处理：
- 所有 HTML 中的资源（JS/CSS/图片）使用相对路径或
/开头的绝对路径 - 设置
build.base: './'可让资源路径相对于当前 HTML，适合部署到子目录 - 若部署在根路径，保持默认
base: '/'即可，Vite 会自动解析为正确 URL - 图片等静态资源放在
public/下可直接通过/xxx.png访问，无需 import
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
