标准答案
- 纯 Vue SPA 通常由 Vue Router 接管前端路由,入口 HTML 较薄,页面内容主要在浏览器运行后生成。
- Nuxt 使用文件路由和约定式目录,把页面、布局、数据获取、服务端接口和 SEO 配置整合到同一套框架里。
- 渲染模式上,Nuxt 可以做 SSR、SSG、ISR 或客户端渲染;纯 Vue SPA 默认是客户端渲染。
- 数据获取上,Nuxt 提供 useAsyncData、useFetch、服务端预取和 hydration 数据复用,能减少首屏空白和重复请求。
- SEO 上,Nuxt 更容易输出可索引 HTML、canonical、meta、OG 和结构化数据;SPA 需要额外处理预渲染或服务端渲染方案。
题目解析
选择 Nuxt 不是因为它比 Vue “高级”,而是因为它把路由、渲染、数据和部署边界统一起来。
后台管理系统、强登录后的工具页面,不一定需要 Nuxt。内容站、营销页、文档站和有搜索流量目标的页面,更适合考虑 Nuxt。
Nuxt 仍然基于 Vue。组件响应式、组件通信、状态管理和样式组织的能力不会消失,只是运行时多了服务端和客户端一致性的要求。
代码示例
Nuxt 页面可以在页面级声明数据获取和 SEO 信息,而不是把所有逻辑塞进客户端 mounted。
Vue
<script setup lang="ts">
const { data: article } = await useAsyncData('article', () => {
return queryContent('/zh/articles/example').findOne()
})
useSeoMeta({
title: article.value?.title,
description: article.value?.excerpt
})
</script>
<template>
<article>
<h1>{{ article?.title }}</h1>
</article>
</template>常见误区
- 认为 Nuxt 只是 Vue Router 的文件路由版本,忽略服务端渲染和数据获取模型。
- 把所有页面都默认做 SSR,不评估页面是否需要 SEO、首屏性能或服务端上下文。
- 在 Nuxt 页面里直接使用 window、document,导致服务端渲染阶段报错或 hydration 不一致。