vue 3 多页面应用（mpa）需为每个页面配置独立入口、html 模板和输出路径，主流方式为 vue-cli 的 pages 配置和 vite 的 rollupoptions.input 显式声明；目录应按页面分 src/pages/login/ 等，各页面独立初始化 vue 实例，部署时需 http 服务支持 html fallback。
Vue 3 项目配置多页面（MPA）打包，核心是让每个页面拥有独立入口、独立 HTML 模板和独立输出路径。不依赖 SPA 的 router 切换，而是生成多个 HTML 文件（如 login.html、admin/index.html），各自加载对应 JS 资源。主流方式分两类：基于 vue-cli（推荐快速落地）和基于 vite（更轻量灵活）。关键不在“能不能”，而在目录组织、入口识别和构建隔离是否清晰。
vue-cli 方式：用 pages 配置一键启用
这是最稳妥、文档完善、开箱即用的方式。只需在 vue.config.js 中声明 pages 对象：
- 每个子页面对应一个 key（如
login、report），value 是一个对象，必须含entry（JS 入口路径），可选配template（HTML 模板）、filename（输出文件名）、title等 - 模板默认复用
public/index.html，但建议为每个页面准备专属模板（如public/login.html），避免 title、meta、script 标签冲突 - 入口 JS 文件（如
src/pages/login/main.js）需独立初始化 Vue 实例，不能复用根main.js - 打包后，
dist/login.html和dist/report.html各自加载自己的 JS/CSS，互不干扰
vite 方式：靠 rollupOptions.input 显式声明入口
vite 本身不内置多页概念，需手动指定多个 HTML 入口文件，vite 会自动解析其 <script type="module"></script> 引用的 JS 作为入口：
- 在项目根目录下为每个页面建 HTML 文件（如
login.html、admin.html），每个都包含唯一<div id="app"></div>和指向对应 main.js 的 script 标签 - 在
vite.config.js的build.rollupOptions.input中列出这些 HTML 路径：{ login: resolve(__dirname, 'login.html'), admin: resolve(__dirname, 'admin.html') } - 确保各页面的
main.js位于不同路径（如src/pages/login/main.js），且内部调用createApp(...).mount('#app') - 输出结构由
build.rollupOptions.output控制，可设chunkFileNames: 'js/[name]-[hash].js'实现按页面分包
目录结构建议：解耦优先，避免共享污染
无论用哪种工具，合理的目录划分决定长期可维护性：
- 所有页面入口统一放在
src/pages/下，按页面名分文件夹（src/pages/login/、src/pages/dashboard/） - 每个页面文件夹内含：自己的
main.js、App.vue、router.js（如有）、assets/；共用组件放src/components/，全局逻辑放src/composables/或src/stores/ - 不要让多个页面共用同一个
main.js或router实例 —— 这是 MPA 和 SPA 的根本区别 - 若需按需打包单个页面（如只构建
login），可在脚本中传参动态读取 pages 配置，或用 vite 的defineConfig函数式写法做条件判断
运行与部署注意点
多页面开发时本地调试和线上部署逻辑不同：
- 本地
npm run serve默认只起一个服务，访问/login.html需确保 dev server 支持 HTML fallback（vue-cli 自带，vite 默认支持） - 打包后必须部署到真实 HTTP 服务（如 Nginx、Apache、Vercel），不能直接双击打开
dist/login.html—— 否则资源路径（如/assets/xxx.js）会 404 - Nginx 配置需开启
try_files $uri $uri/ /index.html;类似逻辑，确保每个 HTML 页面能正确加载自身资源 - 如果页面路径带子目录（如
dist/customer/order.html），注意base配置（vue-cli 的publicPath/ vite 的base）要匹配实际部署路径
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
