Vue、SPA、MPA，我曾经以为它们是一回事
很多人刚接触 Vue 就会形成一个误解：用了 Vue = 做的是 SPA。 其实这三个概念分属不同层次。这篇文章来帮你彻底分清楚。
🤔 先说一个很常见的误解
当我第一次看到 Vue 项目时，我以为：
"Vue 框架 = 做的就是 SPA（单页应用）"
后来才知道这是错的。
Vue 是工具；SPA / MPA 是架构选择。
就像"用了锤子 ≠ 只能盖砖房"一样。
三个概念，分开定义
Vue 是什么？
Vue 是一个前端框架，用来做：
- 组件化开发
- 数据绑定
- 状态管理
- 路由协作
它只是工具层面的东西，本身不决定你做的是 SPA 还是 MPA。
SPA 是什么？
SPA = Single Page Application（单页应用）
核心特征：
✅ 通常只加载一个 HTML 壳
✅ 页面切换主要靠前端路由（不整页刷新）
✅ 状态和布局在前端统一维护
✅ 用户体验流畅，切页无感知
你进一个后台管理系统，左边菜单点一点，右边内容换了，但浏览器没整页刷新——这就是 SPA 的体验。
MPA 是什么？
MPA = Multi Page Application（多页应用）
核心特征：
✅ 一个站点有多个独立页面入口
✅ 页面跳转通常整页刷新（像传统网站）
✅ 每个页面相对独立
✅ 更利于 SEO 和首屏加载
你打开一个新闻网站，点一条新闻跳过去，地址栏变了，整个页面重新刷新——这就是 MPA 的体验。
🎯 Vue 可以做 SPA，也可以做 MPA
Vue 被用在很多场景里：
| 场景 | 说明 |
|---|---|
| SPA | Vue CLI 默认创建的项目就是这种 |
| MPA | 通过 vue.config.js 配置 pages 多入口 |
| SSR | Nuxt.js 等方案 |
| 老系统局部组件 | 只在某个区域引入 Vue |
| 微前端子应用 | Vue 作为微前端子应用框架 |
所以，用了 Vue ≠ 一定是 SPA。
你之所以会有"Vue = SPA"的感觉，是因为 Vue CLI 默认创建出来的项目就是 SPA 形态，看多了自然就建立了这个印象。
🏢 SPA 和 MPA 各适合什么项目
SPA 更适合：
✅ 后台管理系统（CRM、ERP、OA 等）
✅ 即时聊天工作台
✅ 需要登录才进入的系统
✅ 页面之间有大量共享状态
✅ 交互复杂、切换频繁
✅ 希望保留页面状态（筛选条件、表单草稿）
MPA 更适合：
✅ 企业官网
✅ 新闻/内容站
✅ 活动宣传页
✅ 落地页
✅ SEO 要求高的场景
✅ 页面之间相互独立、几乎没有共享状态
一句口诀
后台系统、强交互、统一壳、状态多 → SPA
内容展示、页面独立、SEO 重要 → MPA
🔎 为什么当前这个项目是 SPA
判断一个项目是不是 SPA，不是看有没有 index.html（那只是模板文件），而是看它有没有这些特征：
✅ 单入口
// src/main.js
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
只有一个根实例，说明整个应用是单入口的。
✅ 单根壳
<!-- src/App.vue -->
<router-view />
App.vue 只有一个路由出口，整个应用都从这里走。
✅ 后台壳继续承接路由
在 Home.vue 里，菜单栏、顶部栏、标签页是"壳"，业务页面通过 router-view 填进来。
这意味着用户切页面时，壳不动，只有内容区域切换——SPA 的标志性体验。
✅ 前端路由统管页面切换
// src/router/index.js
// 路由决定页面，不依赖后端返回 HTML
页面切换是前端完成的，不是每次重新请求一个独立 HTML。
✅ 没有多入口配置
// vue.config.js
// 没有 pages 字段 → 不是多页项目
如果要做 MPA，需要在 vue.config.js 里配置 pages: { ... } 指定多个入口。项目里没有这个配置，说明它是单页项目。
🧩 public/index.html 不能证明是 SPA
public/index.html 只是构建工具生成最终 HTML 时用的模板文件。
它的作用：
- 提供 HTML 骨架
- 提供挂载点
<div id="app"></div> - 构建时会自动注入打包后的 JS 和 CSS
SPA 有它，某些 MPA 的入口也有类似文件。
只看这一个文件，无法判断架构。
🔄 理解这条核心链路
public/index.html → HTML 壳（模板）
↓
src/main.js → 创建根实例，启动整个应用
↓
src/App.vue → 总路由出口
↓
src/views/Home.vue → 后台布局壳（菜单、顶栏、标签页）
↓
<router-view> → 当前路由对应的业务页面
每一层都有自己的职责：
| 层级 | 职责 |
|---|---|
main.js | 启动应用，注册插件、路由、状态 |
App.vue | 总出口，把路由页面放出来 |
Home.vue | 后台布局壳，维护菜单、顶栏、标签 |
router-view | 显示当前路由对应的具体页面 |
🏁 最终结论
Vue 是框架，不等于 SPA。
SPA 是单页应用形态，MPA 是多页应用形态。
判断是不是 SPA，要看：
- 单入口 ✅
- 前端路由切页 ✅
- 共享布局壳 ✅
- 状态共享 ✅
当前这个项目具备所有 SPA 特征，
是一个非常标准的 Vue2 SPA 后台管理系统。
这是 Vue2 学习系列第五篇。
学习这件事，贵在持续输出。每弄明白一个点，就写下来。 写下来，才是真的弄明白了。
