Nuxt3动态路由生成疑问：API路由无法生成页面如何解决？

架构老林

2026-7-15

在Nuxt3中动态从API获取路由并生成静态页面

Nuxt3里原Nuxt2的generate.routes配置已不再直接支持，你可以通过以下两种方式实现动态路由的预渲染：

方案一：使用`nitro.prerender.routes`配置

直接在nuxt.config.ts中配置异步函数，从API拉取路由列表：

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: async () => {
        // 调用产品API获取数据
        const res = await fetch('https://your-api-domain/products')
        const products = await res.json()
        // 转换为预渲染路由数组
        return products.map(product => `/products/${product.id}`)
      }
    }
  }
})

运行nuxt generate时，Nitro会先执行该异步函数获取所有产品路由，再自动预渲染对应的页面到dist目录。

方案二：使用`app:prerenderRoutes`钩子

在server/plugins目录下创建自定义插件（比如prerender-routes.ts），通过钩子动态添加预渲染路由：

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('app:prerenderRoutes', async (routes) => {
    // 从API拉取产品数据
    const res = await fetch('https://your-api-domain/products')
    const products = await res.json()
    // 生成产品路由并添加到预渲染列表
    const productRoutes = products.map(product => `/products/${product.id}`)
    routes.push(...productRoutes)
  })
})

这个钩子会在预渲染流程启动时触发，将动态生成的路由加入预渲染队列。