如何在Nuxt3中生成主站点地图及动态站点地图链接

需求说明 #

当前Nuxt3生成的站点地图包含根路径与文章详情页混合的结构，需要调整为：

• 根站点地图仅保留 /sign-up、/login、/get-started
• 所有文章路径单独拆分到 /sitemap/article.xml 中

实现步骤 #

1. 安装站点地图模块 #

确保项目中已安装Nuxt官方的站点地图模块：

npm install @nuxtjs/sitemap
# 或
yarn add @nuxtjs/sitemap

2. 配置拆分站点地图 #

在项目根目录的 nuxt.config.ts 中，通过多实例配置实现站点地图拆分：

export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  sitemap: {
    hostname: 'https://你的域名.com', // 替换为实际站点域名
    sitemaps: [
      // 根站点地图配置
      {
        path: '/sitemap.xml',
        routes: ['/sign-up', '/login', '/get-started']
      },
      // 文章专属站点地图配置
      {
        path: '/sitemap/article.xml',
        routes: async () => {
          // 动态获取所有文章slug，替换为你的实际获取逻辑（比如从CMS/API拉取）
          const articles = await fetchArticles()
          return articles.map(article => `/articles/${article.slug}`)
        }
      }
    ]
  }
})

3. 动态获取文章路由（可选） #

如果文章数据来自外部接口或数据库，编写异步函数获取所有文章slug：

async function fetchArticles() {
  // 示例：从API获取文章列表
  const res = await fetch('https://你的接口地址/articles')
  return res.json()
}

4. 验证效果 #

启动Nuxt项目后：

• 访问 /sitemap.xml，将仅显示根路径的三个条目
• 访问 /sitemap/article.xml，将列出所有 /articles/slug1、/articles/slug2 这类文章路径

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