Vite实现多入口SPA需通过配置隔离而非语法糖：方式一用单配置+动态root路径，方式二用多独立vite.config.ts文件；每个入口须含独立index.html、main.ts及可选专属router/store，构建产物分离且不可混用MPA方案。
Vite 本身默认是单页面应用（SPA）构建模式，但“多入口单页面构建”这个说法需要先厘清概念：它不是指多个 HTML 页面（MPA），而是指一个项目中存在多个独立的、可单独启动或打包的 SPA 入口——比如 admin.html 和 public.html 各自拥有完整 Vue/React 实例、路由、状态管理，彼此隔离，但共用同一套源码结构和开发环境。
这种模式常见于中后台系统（管理端 + 用户端）、白标产品（多个客户定制版）或微前端子应用预构建场景。关键在于：每个入口是逻辑独立的 SPA，但构建时可分别触发、输出独立资源。
下面直接说明核心配置方式：
多入口 SPA 的本质是“多配置 + 多启动”
Vite 原生不支持运行时动态切换入口，但可通过以下两种主流方式实现：
立即学习“Java免费学习笔记（深入）”；
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
-
方式一：单 vite.config.js + 动态入口路径（推荐用于轻量多入口）
利用命令行参数决定当前构建/开发哪个入口：// vite.config.js import { defineConfig } from 'vite' import { resolve } from 'path' export default defineConfig(({ command, mode }) => { // 开发时通过 npm run dev -- --envFile .env.admin 指定环境 // 构建时通过 npm run build --project=admin 控制入口 const project = process.env.npm_config_project || 'public' return { root: resolve(__dirname, `src/${project}`), // 每个入口有自己独立的 src 子目录 build: { rollupOptions: { input: resolve(__dirname, `src/${project}/index.html`) // HTML 入口 }, outDir: `dist/${project}` } } })对应脚本示例（package.json）：
"scripts": { "dev:admin": "vite --envFile .env.admin", "dev:public": "vite --envFile .env.public", "build:admin": "vite build --project=admin", "build:public": "vite build --project=public" } -
方式二：多 vite.config.ts 文件 +
-c指定配置（更清晰、适合复杂隔离）
每个 SPA 入口配一套独立配置：vite/ ├── admin/ │ ├── vite.config.ts // 配置 root='./src/admin', entry='./src/admin/main.ts' │ └── index.html └── public/ ├── vite.config.ts // 配置 root='./src/public', entry='./src/public/main.ts' └── index.html启动命令：
vite -c vite/admin/vite.config.ts # 启动 admin SPA vite build -c vite/public/vite.config.ts # 打包 public SPA
每个入口需满足 SPA 基础结构
以 src/admin/ 为例，必须包含：
-
index.html：含<div id="app"></div>和<script type="module" src="/main.ts"></script> -
main.ts：创建独立 App 实例（不共享 router/store，除非显式导出复用） -
App.vue：该入口专属根组件 - （可选）
router/index.ts、store/index.ts：按需独立定义，避免跨入口污染
注意事项
- ✅ 开发服务器只响应一个入口：
vite dev默认读根目录index.html；用-c或root动态指定后，它就只服务那个子入口。 - ✅ 构建产物完全分离：
dist/admin/和dist/public/互不干扰，可部署到不同子路径（如/admin/和/）。 - ❌ 不要试图在同一个
vite.config.js中用rollupOptions.input写多个 HTML 路径来实现“多入口 SPA”——那会变成 MPA（多页面应用），每个 HTML 加载的是不同 JS bundle，但它们共享同一份index.html模板逻辑，不符合 SPA 独立实例的要求。 - ⚠️ 若需共享组件或工具，建议抽离到
src/shared/并通过别名@shared引入，而非跨入口直接引用。
本质上，Vite 的“多入口单页面构建”是靠配置隔离 + 目录隔离 + 启动隔离达成的，不是语法糖，而是工程组织方式。只要入口目录结构清晰、配置指向明确，就很容易维护。
