Nuxt.js 开发

Nuxt 是一个 Vue.js 框架，处理生产应用所需的一切：服务器端渲染、静态站点生成、文件系统路由、状态管理和服务器 API 路由 — 几乎无需配置。而纯 Vue 需要自己组装这些功能，Nuxt 将它们作为一个连贯、有主见的系统提供。

定义性功能是渲染灵活性。一个 Nuxt 应用可以为不同的路由提供不同的渲染策略：为主页服务器端渲染以获得 SEO 优化，在构建时静态预渲染博客文章，以及客户端渲染已登录的仪表板。这是 Nuxt 的混合渲染模式，在 nuxt.config.ts 中按路由配置。

文件系统路由

Nuxt 从 pages/ 目录自动生成路由。无需路由配置文件。pages/blog/[slug].vue 文件变成 /blog/:slug。pages/about.vue 文件变成 /about。嵌套目录创建嵌套路由。

这扩展到服务器层。server/api/ 中的文件变成 API 端点。server/api/posts.get.ts 变成一个 GET /api/posts 处理程序。单个项目中的全栈开发，始终使用 TypeScript。

相同的约定也适用于：

• composables/：自动导入的 Vue composables — useFetch、useState、useAsyncData
• middleware/：在导航前运行的路由中间件
• layouts/：包装页面的共享布局组件
• plugins/：在应用初始化时运行的代码
• components/：自动导入的 Vue 组件，无需显式导入语句

渲染模式

SSR（服务器端渲染）：默认模式。HTML 在服务器上按请求渲染。适合动态内容、个性化和需要认证的页面。由 Nitro 服务器引擎驱动。

SSG（静态站点生成）：页面在构建时预渲染。输出是从 CDN 提供的静态 HTML。通过 nitro.prerender.routes 配置或在路由级别设置 ssr: false。

混合渲染：不同的路由使用不同的策略。nuxt.config.ts 中的 routeRules 允许你按路由设置预渲染、SSR、缓存 TTL、重定向和 CORS 规则。这是 Nuxt 最强大但使用最少的功能。

SPA 模式：完全客户端渲染。适用于 SEO 不重要但交互性优先的管理面板或仪表板。

我们用 Nuxt 构建什么

营销网站和内容平台

Nuxt 与 SSG 或混合渲染结合是营销网站的强大组合。内容路由预渲染以获得性能和 SEO。动态路由 — 搜索、筛选、个性化推荐 — 使用 SSR 或客户端获取。结果是一个快速、SEO 友好的网站，在需要的地方具有完整的交互性。

全栈 Web 应用

Nuxt 的服务器层（Nitro）在与前端相同的项目中处理 API 路由、中间件、数据库连接和服务器端逻辑。这是一个真正的全栈框架 — 我们在应用中使用它，其中独立的 API 服务器会增加不必要的复杂性。

Nuxt 与无头 CMS

Nuxt 与无头 CMS 整合得很清晰：Strapi、Contentful、Sanity 和 DatoCMS 都有官方或社区 Nuxt 模块。我们配置数据层、为内容路由设置 ISR 缓存，以及连接 CMS 的 webhook 到 Nuxt 重建触发器。

Vue 到 Nuxt 的迁移

拥有现有 Vue.js SPA 但需要 SSR 以获得 SEO 的团队经常迁移到 Nuxt。组件模型是相同的 — 迁移主要是重构路由和添加服务器端数据获取。我们处理这些迁移并保留所有现有的组件逻辑。

Nitro 服务器引擎

Nuxt 的 Nitro 引擎处理服务器端渲染和 API 路由。它与框架无关：相同的 Nuxt 应用可以部署到 Node.js、Cloudflare Workers、AWS Lambda、Vercel Edge Functions 或 Netlify，无需代码更改。这种部署灵活性是一个有意义的运营优势。

Nuxt 模块生态系统

Nuxt 的模块系统以最小化配置添加功能：

• @nuxt/content：使用 Markdown/YAML/JSON 的基于文件的 CMS。适合文档网站和博客。
• @nuxt/image：自动图像优化、格式转换和延迟加载。
• @pinia/nuxt：Pinia 状态管理，自动导入且 SSR 兼容。
• @nuxtjs/i18n：国际化与基于区域设置的路由。
• @nuxtjs/tailwindcss：Tailwind CSS 集成。
• nuxt-security：安全标头、CSRF 保护、速率限制。

我们根据项目需求选择和配置模块。没有模块臃肿。

Nuxt vs Next.js

两者都是生产级的元框架。选择主要取决于你的团队现有知识和对 Vue vs React 的偏好。

何时选择 Nuxt：

• 你的团队了解 Vue.js 并更喜欢其组件模型
• 你想要开箱即用的默认配置，减少配置
• 你重视 Nuxt 模块生态系统以快速添加功能
• 你想要混合渲染而无需复杂的中间件配置

何时选择 Next.js：

• 你的团队以 React 为主
• 你需要 React Server Components
• 你想要 Vercel 的原生优化

两者都可以清晰地部署到 Vercel、Netlify 和 Cloudflare。我们都有丰富的经验，并将老实地告诉你哪个更适合你的具体项目和团队。