在 Nuxt 3 中生成站点地图 (Sitemap)

在 Nuxt 3 中生成站点地图有几种方法，以下是常见的实现方式：

方法一：使用 @nuxtjs/sitemap 模块

1. 首先安装依赖：

npm install @nuxtjs/sitemap

2. 在 nuxt.config.ts 中配置：

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/sitemap'
  ],
  
  sitemap: {
    hostname: 'https://yourdomain.com',
    // 动态路由需要提供 routes 配置
    routes: async () => {
      // 这里可以动态获取路由，例如从API获取
      const { data } = await fetch('https://api.yourdomain.com/posts')
      return data.map(post => `/posts/${post.id}`)
    }
  }
})

方法二：使用自定义服务器路由

1. 在 server/routes/sitemap.xml.ts 创建文件：

export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig()
  
  // 这里可以获取动态路由
  const posts = await $fetch('/api/posts')
  
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      <url>
        <loc>${config.public.siteUrl}</loc>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
      </url>
      ${posts.map(post => `
        <url>
          <loc>${config.public.siteUrl}/posts/${post.slug}</loc>
          <lastmod>${new Date(post.updatedAt).toISOString()}</lastmod>
          <changefreq>weekly</changefreq>
          <priority>0.8</priority>
        </url>
      `).join('')}
    </urlset>`
  
  event.node.res.setHeader('content-type', 'text/xml')
  return sitemap
})

方法三：使用 nuxt-simple-sitemap 模块（推荐）

这是一个专为 Nuxt 3 设计的现代站点地图模块：

1. 安装：

npm install nuxt-simple-sitemap

2. 配置 nuxt.config.ts：

export default defineNuxtConfig({
  modules: ['nuxt-simple-sitemap'],
  
  site: {
    url: 'https://yourdomain.com',
  },
  
  sitemap: {
    // 可选配置
    exclude: ['/admin/**'],
    autoLastmod: true,
    // 动态路由
    urls: async () => {
      const posts = await $fetch('/api/posts')
      return posts.map(post => ({
        loc: `/posts/${post.slug}`,
        lastmod: post.updatedAt,
        changefreq: 'weekly'
      }))
    }
  }
})

注意事项

1. 确保在生产环境中正确配置了 site.url 或 hostname
2. 对于动态路由，需要提供获取这些路由的方法
3. 站点地图默认会包含所有已生成的页面路由
4. 可以使用 exclude 选项排除特定路由
5. 建议在构建时预生成站点地图以获得更好的SEO效果

验证站点地图

构建后，您可以在以下位置访问站点地图：

• https://yourdomain.com/sitemap.xml
• 或 https://yourdomain.com/sitemap_index.xml（如果有多个站点地图文件）

您可以使用 Google Search Console 或其他SEO工具提交和验证您的站点地图。