Vue 3 多页面应用（MPA）需在项目初始化后通过配置实现：Vue CLI 用 vue.config.js 的 pages 选项定义多入口，Vite 则直接放置多个 HTML 文件并引入对应 JS 入口，二者均生成独立 HTML，跳转用 a 标签。
Vue 3 项目初始化后配置多页面应用（MPA），核心是利用 Vue CLI 3+ 或 Vite 的多入口能力，不依赖 Vue Router 做全局跳转，而是为每个页面生成独立的 HTML 文件。关键不在“初始化时”就写死多页，而是在脚手架创建后，通过配置文件快速启用 MPA 支持。
用 Vue CLI 3+ 初始化并配置 pages
先确保已安装 Vue CLI：
- npm install -g @vue/cli（或使用 yarn global add @vue/cli）
- 执行 vue create my-mpa-app 创建标准 Vue 3 项目（选 TypeScript、Router、Pinia 等按需，不影响 MPA）
- 进入项目，编辑根目录下的 vue.config.js（若无则新建）
配置示例（定义首页和关于页）：
module.exports = {
pages: {
index: {
entry: 'src/pages/index/main.js',
template: 'public/index.html',
filename: 'index.html',
title: '首页'
},
about: {
entry: 'src/pages/about/main.js',
template: 'public/about.html',
filename: 'about.html',
title: '关于我们'
}
}
}
注意：template 路径指向 public 下的 HTML 模板；entry 必须是 JS 入口，每个页面需有自己独立的 main.js 和根组件（如 App.vue）。
立即学习“前端免费学习笔记（深入）”；
项目结构要提前规划好
推荐在 src/pages/ 下按页面分目录，避免混杂：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- src/pages/index/ → main.js + App.vue
- src/pages/about/ → main.js + App.vue
- public/index.html 和 public/about.html 可复用基础结构，仅修改 title 和 id 容器
每个 main.js 写法与根目录一致，例如：
// src/pages/index/main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
用 Vite 初始化并支持多页（更轻量推荐）
Vite 对 MPA 更友好，无需插件即可支持多 HTML 入口：
- 运行 npm create vite@latest，选 Vue + JavaScript/TypeScript
- 在项目根目录直接放多个 HTML 文件（如 index.html、about.html）
- 每个 HTML 中用绝对路径引入对应入口 JS：
<script type="module" src="/src/pages/index/main.js"></script> - 不用改 vite.config.js，默认即支持多 HTML 构建
开发时访问 http://localhost:5173/ 和 http://localhost:5173/about.html 即可分别预览。
构建与部署注意事项
打包后每个页面生成独立 HTML，资源自动按页分割：
- Vue CLI：运行 npm run build，输出 dist/index.html 和 dist/about.html
- Vite：运行 npm run build，HTML 文件保留在 dist 根目录，JS/CSS 自动注入对应 HTML
- 部署时确保服务器能正确返回每个 HTML（如 Nginx 配置不要全部 fallback 到 index.html）
MPA 不需要全局路由守卫，页面间跳转用普通 a 标签即可，例如：<a href="/about.html">关于我们</a>。
