nuxt-sitemap无法抓取预渲染的动态博客页面问题咨询

问题情况 #

• 使用 nuxt@3.10.2 和 @nuxtjs/sitemap@5.1.0
• 博客文章通过组件内的Apollo useAsyncQuery 获取数据渲染
• 已配置Nitro预渲染：开启crawlLinks，指定路由["/", "/blog"]，预渲染日志显示所有博客页面（如/blog/article-x）已生成且可正常访问
• 但站点地图仅包含/pages目录下的静态页面，动态博客页面未被收录

解决方案 #

1. 手动在站点地图配置中生成动态路由 #

直接在nuxt.config.ts的sitemap配置里，通过API获取所有博客文章的路由并添加到站点地图：

export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  sitemap: {
    async routes() {
      // 调用查询获取所有博客文章数据（调整参数确保拿到全部文章）
      const { data: posts } = await useAsyncQuery(getPosts, { size: 1000 })
      // 转换为站点地图需要的路由格式
      return posts.map(post => `/blog/${post.slug}`)
    }
  },
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ["/", "/blog"],
    },
  },
})

原因：站点地图模块默认仅识别静态路由和预渲染时能通过页面链接爬取到的路由。如果博客列表页的链接不是标准<a>标签（比如用JS事件跳转），crawlLinks无法抓取到动态路由，手动生成是最可靠的方式。

2. 确保博客列表页的链接可被爬取 #

检查/blog列表页的文章链接，必须是标准的<a href="/blog/xxx">标签，而非仅通过JS绑定点击事件。只有这样，Nitro的crawlLinks才能在预渲染时识别到这些路由，进而同步到站点地图。

3. 验证路由生成的执行环境 #

确保sitemap.routes函数中的数据查询是在服务端执行的。如果你的Apollo配置在服务端可用，上述示例的useAsyncQuery就能正常获取数据；如果不行，可以改用直接调用后端API的方式（比如$fetch）获取文章列表。

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