从0到1使用Vue3+Nuxt.js搭建服务端渲染（SSR）的避坑指南

从0到1使用Vue3+Nuxt.js搭建服务端渲染（SSR）的避坑指南，结合最新实践整理的关键细节和解决方案：

---

一、项目初始化与目录结构

1. 目录规范

   • Nuxt3默认无src目录，需将Vue3项目的views目录迁移至pages，components保留原样（自动全局注册）
   • 避坑重点：
     • public目录禁止存放index.html（会覆盖SSR入口）
     • 静态资源（图片/CSS）必须放在assets目录，引用时使用~/assets/路径
     • 服务端专用代码（如数据库连接）应置于server目录，避免客户端打包

2. 环境配置

   # 强制要求Node.js ≥18.x，推荐pnpm避免依赖冲突
   npx nuxi@latest init nuxt-ssr && cd nuxt-ssr
   pnpm install @nuxtjs/tailwindcss @element-plus/nuxt -D
   

   • TS支持：优先阅读Nuxt英文文档配置，中文文档可能未同步更新

---

二、Vue3与Nuxt3特性适配

1. 响应式陷阱
   • 服务端数据：使用useAsyncData而非ref/reactive，避免客户端重复请求

     // ✅ 正确示例（服务端获取）
     const {
            
             data } = await useAsyncData('articles', () => $fetch('/api/posts'