Nuxt Content站点动态生成sitemap时标签URL含空格的修复方案

针对你遇到的带空格的标签生成无效URL的问题，核心是要对标签名称做URL编码处理，把空格转换成%20，具体可以从两个地方入手：

1. 配置Nuxt Sitemap自动生成编码后的标签路由 #

在nuxt.config.js的sitemap配置中，自定义路由生成逻辑，用encodeURIComponent()对标签名进行编码：

export default {
  // 其他Nuxt配置...
  sitemap: {
    async routes() {
      // 引入Nuxt Content的内容API
      const { $content } = require('@nuxt/content')
      // 获取所有文章数据
      const allArticles = await $content().fetch()
      // 提取所有标签并去重
      const uniqueTags = [...new Set(allArticles.flatMap(item => item.tags || []))]
      // 生成编码后的标签路由
      return uniqueTags.map(tag => `/tags/${encodeURIComponent(tag)}`)
    }
  }
}

这样执行nuxt generate时，sitemap.xml里的标签URL就会变成http://localhost:3000/tags/performance%20tests这种合法格式。

2. 页面内标签链接同步编码 #

如果你的Markdown页面或Vue组件里有标签跳转链接，也要同步对标签名做编码，比如在Vue模板中：

<template>
  <div class="article-tags">
    <nuxt-link 
      v-for="tag in article.tags" 
      :key="tag"
      :to="`/tags/${encodeURIComponent(tag)}`"
    >
      {{ tag }}
    </nuxt-link>
  </div>
</template>

这样页面上的标签跳转链接也会生成编码后的URL，和sitemap里的地址保持一致，同时浏览器会自动把地址栏里的%20显示为空格，不影响用户体验。

补充说明 #

encodeURIComponent()会自动处理除了字母数字之外的特殊字符，不止是空格，能确保生成的URL完全符合RFC标准，避免出现无效地址的问题。执行nuxt generate时，静态站点的路由也会基于编码后的路径生成，保证访问一致性。

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