Vite原生支持MPA，通过rollupOptions.input配置多个绝对路径HTML入口，每个生成独立HTML/JS/CSS；HTML需自包含、JS独立挂载，配合manualChunks可优化分包，部署时各HTML可直接访问。
直接用 Vite 的 rollupOptions.input 配置多个 HTML 入口，就能实现标准多页应用（MPA）打包。它不是靠插件“模拟”，而是 Vite 原生支持的多入口构建能力——每个页面独立编译、输出单独的 HTML + JS + CSS，互不干扰。
基础配置：定义多个 HTML 入口
在 vite.config.js 中显式列出每个页面的 index.html 路径：
- 路径必须是绝对路径，推荐用
path.resolve(__dirname, ...) - 键名（如
home、about）会成为输出 HTML 文件名（home.html、about.html） - 每个 HTML 文件需包含自己的
<script type="module"></script>引用对应入口 JS
示例：
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')
}
}
}
})
HTML 模板要自包含、可独立运行
每个页面的 index.html 不是占位符，而是完整可部署的文档：
- 必须有
<div id="app"></div>（或你 JS 中挂载的目标元素） - JS 引入路径写相对或绝对路径，例如：
<script type="module" src="./main.js"></script> - 避免依赖全局变量或跨页面共享状态；各页面 JS 独立执行
比如 src/pages/home/index.html：
<!DOCTYPE html> <html> <head><title>首页</title></head> <body> <div id="app"></div> <script type="module" src="./main.js"></script> </body> </html>
优化分包：避免代码重复和体积膨胀
默认情况下，Vue、Pinia 等共用依赖可能被打进每个页面的 chunk，造成冗余。需用 manualChunks 按入口隔离：
- 识别模块所属页面路径，例如
id.includes('src/pages/home/') - 第三方库统一提取为
shared，但排除已 CDN 外部化的（如vue） - CSS 必须开启
build.cssCodeSplit: true，并用assetFileNames单独输出
片段示例：
build: {
cssCodeSplit: true,
rollupOptions: {
output: {
assetFileNames: 'assets/css/[name]-[hash].[ext]',
manualChunks(id) {
if (id.includes('src/pages/home/')) return 'home'
if (id.includes('src/pages/about/')) return 'about'
if (id.includes('node_modules/vue') || id.includes('node_modules/vue-router')) return 'shared'
}
}
}
}
部署与运行注意事项
打包后每个 HTML 都是独立入口，部署时无需特殊路由重写（不像 SPA）：
- 直接放在 Web 服务器根目录，访问
/home.html、/about.html即可 - 若希望用
/home/这类路径，需确保服务器将该路径映射到home.html（Nginx 可配try_files $uri $uri/ /home.html;） - 开发时
vite dev默认只服务index.html；如需多页热更新，建议配合vite-plugin-html动态注入或使用子目录结构（如/home/→src/home/index.html）
