Nuxt静态站点生成后NuxtLink尾斜杠异常问题求助

1. 统一nuxt.config.js中路由与生成配置的尾斜杠规则 #

确保router和generate的trailingSlash配置完全一致，都设置为false：

export default {
  router: {
    trailingSlash: false
  },
  generate: {
    trailingSlash: false // 必须和router的设置保持一致
  }
}

仅配置router的尾斜杠规则不够，generate模块有独立的路径生成控制，两者不一致会导致静态文件路径和路由解析逻辑冲突。

2. 调整NuxtLink的路由写法 #

改用直接拼接绝对路径的字符串形式替代name+params的写法，强制生成无尾斜杠的链接：

<NuxtLink :to="`/review/${review.slug}`">
  <!-- 链接内容 -->
</NuxtLink>

使用name路由解析时，静态生成模式下Nuxt内部可能出现路径拼接偏差，直接指定路径字符串能确保URL严格符合预期规则。

3. 检查动态路由的生成配置 #

如果review-slug是动态路由（对应文件为_slug.vue），确保generate.routes中生成的路径不带尾斜杠：

export default {
  generate: {
    routes: async () => {
      // 示例：从数据源获取slug列表
      const slugs = await getReviewSlugs()
      return slugs.map(slug => `/review/${slug}`) // 不要添加末尾斜杠
    }
  }
}

这样生成的静态文件结构为review/foobar/index.html，能匹配无尾斜杠的访问URL，避免路径不匹配导致的内容加载异常。

4. 清理缓存重新生成 #

执行以下命令彻底清理旧缓存并重新构建静态站点：

rm -rf .nuxt dist
npm run generate
npm run start

残留的旧缓存文件可能保留错误的路由配置，清理后重新生成能确保所有文件遵循新的尾斜杠规则。

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