如何在Nuxt 3中自动预渲染所有路由（无需硬编码指定）

针对你遇到的nuxt generate无法自动预渲染所有路由、仅硬编码路由生效的问题，以下是几种无需手动操作每个页面的解决方法：

方法一：全局路由规则配置（最简方案） #

利用Nuxt的routeRules配置，通过通配符批量设置所有路由的预渲染规则，无需逐个页面修改：

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    inlineRouteRules: true
  },
  routeRules: {
    // 按需排除不需要预渲染的路由（比如API路由）
    '/api/**': { prerender: false },
    // 匹配所有其他路由，开启预渲染
    '/*': { prerender: true }
  },
  // 其他原有配置...
})

这个配置会自动对所有非API路由启用预渲染，同时保留对特定路由的排除能力，适合大多数场景。

方法二：自动扫描pages目录生成预渲染路由列表 #

如果需要更精细的控制（比如处理动态路由的具体参数），可以通过Nuxt钩子自动扫描pages目录生成路由列表：

// nuxt.config.ts
import { readdirSync, statSync } from 'fs'
import { resolve } from 'path'

// 递归遍历pages目录，生成静态路由路径
function getStaticRoutes(dir: string, prefix = ''): string[] {
  let routes: string[] = []
  const files = readdirSync(dir)

  for (const file of files) {
    const fullPath = resolve(dir, file)
    const stats = statSync(fullPath)

    if (stats.isDirectory()) {
      // 处理子目录路由
      routes = [...routes, ...getStaticRoutes(fullPath, `${prefix}/${file}`)]
    } else if (file.endsWith('.vue')) {
      let routePath = `${prefix}/${file.replace('.vue', '')}`
      // 将index.vue转为对应目录的根路径
      if (routePath.endsWith('/index')) {
        routePath = routePath.replace('/index', '') || '/'
      }
      // 过滤动态路由（如需预渲染动态路由，需手动添加具体参数路由）
      if (!routePath.includes(':')) {
        routes.push(routePath)
      }
    }
  }

  return [...new Set(routes)]
}

export default defineNuxtConfig({
  hooks: {
    'prerender:routes'(ctx) {
      const pagesDir = resolve(__dirname, 'pages')
      const autoRoutes = getStaticRoutes(pagesDir)
      // 合并自动生成的路由与原有路由，避免重复
      ctx.routes = [...new Set([...ctx.routes, ...autoRoutes])]
    }
  },
  // 其他原有配置...
})

如果需要预渲染动态路由（比如/posts/[id]），可以在getStaticRoutes函数中手动添加具体参数路由（如/posts/1、/posts/2），或者从接口获取动态参数列表后注入。

方法三：排查原有配置失效原因 #

既然之前相同设置能正常工作，突然失效可以从以下几点排查：

• 清除Nuxt缓存：执行npx nuxt clean后重新运行nuxt generate，缓存可能导致配置未生效。
• 检查版本变更：Nuxt 3.5.x版本对预渲染逻辑有调整，确认是否有配置项被废弃或行为改变。
• 检查冲突配置：是否新增了nitro配置、其他钩子函数修改了预渲染路由列表，或第三方插件影响了路由处理。
• 验证pages目录结构：是否新增了特殊命名的页面（如_开头的动态路由、_.vue通配符页面）导致自动扫描逻辑异常。

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