如何让Nuxt 3正确构建SSG页面与动态API路由？

核心配置思路 #

要同时实现静态页面预渲染和API路由保留运行时处理，需在nuxt.config.ts中结合routeRules与Nitro输出配置，针对Cloudflare预设做定向调整。

具体配置步骤 #

1. 修改nuxt.config.ts的路由规则与Nitro配置

export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare',
    output: {
      serverDir: '.output/server',
      publicDir: '.output/public'
    }
  },
  routeRules: {
    // 非/api路由强制静态预渲染
    '/**': { prerender: true },
    // /api路由保留运行时处理，不预渲染
    '/api/**': { prerender: false, ssr: true }
  },
  ssr: true,
  generate: {
    // 保留服务器目录，不删除API路由代码
    cleanup: false,
    // 指定需要预渲染的静态路由（动态路由需手动补充）
    routes: async () => {
      return ['/', '/about', '/contact']
    }
  }
})

2. 执行统一构建命令
   无需分开执行nuxt build或nuxt generate，直接运行：

nuxt build

该命令会同时完成：

• 将所有非API路由预渲染为静态文件，输出到.output/public
• 将/api路由打包为Cloudflare Worker运行时代码，输出到.output/server

3. 部署到Cloudflare

• Cloudflare Pages：设置构建命令为nuxt build，输出目录为.output/public，同时将.output/server下的代码复制到项目functions目录开启函数支持
• Cloudflare Worker：直接部署.output/server目录的Worker代码，将.output/public的静态资源上传至R2或绑定为Worker资产

关键注意事项 #

• 动态路由需在generate.routes中手动指定所有预渲染路径，或通过脚本自动生成列表
• 本地可执行nuxt preview同时验证静态页面与API路由的运行效果
• Cloudflare Pages需开启函数功能，确保API路由请求能被Worker正确处理

内容的提问来源于stack exchange，提问作者Evan Summers