从痛点概览来看，普通 Vue 项目在公开网站的困境

普通 Vue 项目已经能够完成组件开发、状态管理和页面交互。但公开网站还需要处理搜索收录、页面元数据、路由生成、多语言地址和部署方式。开发者如果逐项组合 Vue Router、预渲染工具、SEO 插件和国际化插件。项目配置会逐渐分散，页面结构与建立规则也容易失去统一约束。

Nuxt 3 的定位与主要优势

Nuxt 3 建立在 Vue 之上，将路由、渲染、数据获取、SEO 和服务端能力整合到同一套工程结构中。它适合内容公开、页面结构明确、需要搜索收录的网站也可以继续 为包含接口和动态数据的应用。Nuxt 官方将其定位为基于 Vue 的全栈框架并提供文件路由、服务端渲染、静态生成和自动导入等能力。

一、约定式目录结构——让“文件即路由”成为可能

Nuxt 3 采用约定式目录

• pages/创建页面文件，框架自动生成对应路由。
• components/公共组件。
• layouts/全局布局。老实说，
• public/静态资源。

这种设计减少了页面文件与路由配置之间的重复关系。

nuxt-app/
├─ app.vue
├─ nuxt.config.ts
├─ pages/
│ ├─ index.vue
│ ├─ about.vue
│ └─ articles/
│ └─ .vue
├─ components/
│ ├─ SiteHeader.vue
│ └─ ArticleCard.vue
├─ layouts/
│ └─ default.vue
├─ assets/
│ └─ css/
└─ public/
└─ images/

文件方法会直接转换为访问地址：

pages/index.vue → /
pages/about.vue → /about
pages/articles/.vue → /articles/:slug

痛点对比：普通 Vue 项目通常需要在 router.ts 中手动声明这些映射，新增或移动页面时容易忘记同步路由导致 404。Nuxt 通过约定式路由，实现页面增删即自动更新路由，降低维护成本。

二、页面渲染与 SEO——从“客户端渲染”到“首屏可见”

Nuxt 3 可以在服务端或建立阶段生成完整 HTML：

• SSR: 每次请求都返回完整的 HTML，再交给浏览器进行“水合”。不过，适合频繁更新的根据数据调整站点。
• SWR: 在建立阶段一次性生成 HTML，部署后仅需 Nginx 或对象存储即可提供静态文件。极大提高首屏加载速度并调整 SEO 指标。

下面示例展示如何在组件内部同时编写内容与 SEO 信息：

Pain point：如果在普通 Vue 中使用 $router.afterEach => document.title = ...) 动态修改标题，搜索引擎抓取时往往只能看到空白标题；而 Nuxt 的 / 会在建立阶段写入真实的 `

三、静态生成 + 多语言——一次建立。多语言站点全覆盖

Pain point：多语言 URL 与 SEO 冲突

- 若仅在前端切换文字而不改变 URL，搜索引擎只能看到默认语言版本； - 缺少统一的语言前缀会导致站点地图混乱、规范链接失效。

Nitro 的预渲染功能结合 模块，可为每种语言生成独立方法：

export default defineNuxtConfig({
ssr的观点是，true,nitro: {
prerender: {
crawlLinks: true,routes:
}
},modules:,i18n: {
defaultLocale: 'zh',strategy: 'prefix_except_default',// 默认语言无前缀。其余语言加前缀
locales:
}
})
)

The above configuration will generate:
.output/public/
├─ index.html # /
├─ about/
│ └─ index.html # /about
├─ en/
│ ├─ index.html # /en
│ └─ about/
│ └─ index.html # /en/about
└─ _nuxt/
├─ entry.js
└─ entry.css


Pain point：手动列举动态路由容易遗漏 

- 动态文章列表若未被爬虫发现，则不会被预渲染；- 缺少对应 HTML 会导致访问子页时报错 “404”。方法是开启 CrawlLinks:true` 或手动把动态方法加入 .prerender.routes.

四、为什么选择 Nuxt ——四大痛点一次性击破 


S E O 可见性：SWR 能够输出完整的 `

统一约定：文件即路由 + 自动导入。让页面数量激增时仍保持清晰结构，避免配置漂移。

I18n 稳定 URL：`prefix_except_default` 策略确保每种语言都有唯一且可索引的地址。

COST 降低：SWR 输出纯静态文件。可托管于 Nginx 或对象存储，无需长期运行 Node 服务，从而显著削减运维成本。


Pain point 回顾：If you stick with a plain Vue project,you must自行组合以下模块才能达到同等效果——Vue Router + vite-plugin-ssg + vue-meta + vue-i18n + 手写 Nginx 配置。怎么说呢，任何一步配置遗漏。都可能出现如下常见问题：


搜索引擎抓取不到正文.

SNS 分享卡片缺失 OG 信息.

Dynamically generated pages 未进入预渲染列表导致访问报错.

Lack of stable language URLs 导致 duplicate 内容惩罚.

Nginx 未正确指向 .output/public 导致资源找不到.


五、部署教程与常见陷阱 

Pain point：Nginx 配置不当导致资源走回 Node 服务 
server {
listen 80;server_name example.com;root /var/www/site/.output/public;index index.html;location / {
try_files $uri $uri/ =404;}
location /_nuft/ {
try_files $uri =404;expires 1y，add_header Cache-Control "public,immutable";}
}


Pain point：动态路由未被抓取或未列入预渲染清单 



If a route is only reachable via client‑side navigation and not referenced in any static page。Nitro will skip it during prerendering.

Solve by eir enabling CrawlLinks:true,providing a sitemap plugin,or manually adding missing paths to .prerender.routes.
`