Nuxt 3 + Strapi CMS：构建现代化内容管理系统的最佳实践

为什么选择 Nuxt 3 + Strapi？

在众多全栈方案中，Nuxt 3 + Strapi 的组合至今仍是内容密集型应用的首选：

• Nuxt 3 提供服务端渲染（SSR）、静态生成（SSG）与客户端混合渲染，SEO 友好
• Strapi 5 提供开箱即用的内容类型构建器、权限管理与 REST/GraphQL API
• TypeScript 全覆盖：两者均具备一流的 TS 支持，减少运行时错误

项目初始化

创建 Nuxt 3 应用

pnpm create nuxt@latest my-cms-app
cd my-cms-app
pnpm add @nuxtjs/strapi

启动 Strapi

pnpm create strapi-app@latest cms --quickstart

关键配置

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/strapi'],
  strapi: {
    url: process.env.STRAPI_URL || 'http://localhost:1337',
    prefix: '/api',
    version: 'v5',
  },
});

类型安全的数据获取

// composables/useArticles.ts
const { find } = useStrapi();

const { data: articles } = await useAsyncData('articles', () =>
  find<Article>('articles', {
    populate: ['cover', 'author'],
    sort: ['publishedAt:desc'],
  }),
);

性能优化技巧

1. 增量静态再生（ISR）

// pages/articles/[slug].vue
defineRouteRules({
  prerender: true,
  isr: 60 * 10, // 每 10 分钟重新验证
});

2. 图片优化

使用 <NuxtImg> 组件自动处理 WebP 转换与懒加载：

<NuxtImg
  :src="article.cover.url"
  :alt="article.title"
  width="800"
  height="450"
  format="webp"
  loading="lazy"
/>

3. 内容缓存

在 Nitro 层添加缓存规则：

// nitro.config.ts or nuxt.config.ts routeRules
routeRules: {
  '/api/articles/**': { cache: { maxAge: 300 } },
}

部署架构

┌─────────────┐    HTTPS    ┌─────────────┐
│   用户浏览器  │ ──────────→ │  Nuxt 3 SSR │
└─────────────┘             │  (Node.js)  │
                            └──────┬──────┘
                                   │ REST API
                            ┌──────▼──────┐
                            │  Strapi CMS │
                            │  (Node.js)  │
                            └──────┬──────┘
                                   │
                            ┌──────▼──────┐
                            │ PostgreSQL  │
                            └─────────────┘

总结

Nuxt 3 + Strapi 的组合为内容驱动的应用提供了理想的开发体验：快速迭代、类型安全、生产就绪。结合 Synthly 的 AI 能力，你甚至可以通过自然语言描述快速生成整个信息架构。

下一篇文章我们将深入讲解 Webhook 触发的自动化部署流程。

常见问题

Q：Nuxt 3 和 Strapi 5 如何配合使用？ Nuxt 3 作为 SSR 前端通过 REST 或 GraphQL 调用 Strapi 提供的内容 API，Strapi 负责内容编辑和存储。两者通过环境变量配置 API URL 连接，配合 @nuxtjs/strapi 模块实现类型安全调用。

Q：Nuxt 3 + Strapi 是否适合 SEO？ 非常适合。Nuxt 3 的 SSR/SSG 模式保证页面在服务端渲染完整 HTML，爬虫可直接抓取内容；结合 useHead 可精细控制每页的 meta、OG 标签。

Q：Strapi 支持私有化部署吗？ 支持。Strapi 开源版本可以完全部署在私有服务器，支持 PostgreSQL、MySQL、SQLite 等多种数据库，可运行在 Docker 或传统 VPS 上。

Q：ISR（增量静态再生）在 Nuxt 3 中如何实现？ 通过 defineRouteRules 配置 isr 选项，或在 nuxt.config.ts 中使用 routeRules，即可为指定路由开启 ISR，设置重新验证间隔（如每 10 分钟）。