Nuxt SSG 博客的尾斜杠到底怎么加？
内容提要
本文讨论了在使用 Nuxt 框架构建博客时，如何实现所有页面 URL 以斜杠结尾的策略。作者介绍了六个配置层面，包括 SEO、出站链接、静态文件处理和入站 URL 规范化，确保用户输入的 URL 无论是否带斜杠都能正确访问，从而实现全链路无 HTTP 301 跳转，提升用户体验和 SEO 效果。
关键要点
-
使用 Nuxt 框架构建博客时，所有页面 URL 以斜杠结尾的策略是为了避免搜索引擎将相同内容视为不同 URL。
-
SEO 层面通过配置 @nuxtjs/seo 的 trailingSlash 选项来影响 canonical link、sitemap.xml 等生成的 URL。
-
出站链接通过 Nuxt 4 的 experimental 配置，确保 <NuxtLink> 渲染的 href 始终带斜杠。
-
硬编码链接也应直接写成带斜杠的形式，以防止未来配置变动导致的问题。
-
SSG 阶段的 prerender 配置确保请求 /about 和 /about/ 都能命中同一份 about/index.html 文件。
-
入站 URL 规范化通过全局 client middleware 实现，避免使用 HTTP 301 跳转。
-
useAsyncData 的 key 需要使用 route.name 和 route.params，避免因路径不一致导致的 hydration 问题。
-
整体策略确保全链路无 HTTP 301 跳转，提升用户体验和 SEO 效果。
延伸问答
为什么在 Nuxt 博客中要使用尾斜杠？
使用尾斜杠可以避免搜索引擎将相同内容视为不同的 URL，从而提升 SEO 效果。
如何在 Nuxt 中配置 SEO 以支持尾斜杠？
可以通过在 nuxt.config.ts 中设置 @nuxtjs/seo 的 trailingSlash 选项为 true 来影响生成的 canonical link 和 sitemap.xml。
Nuxt 4 中如何确保出站链接带有尾斜杠？
可以在 nuxt.config.ts 中使用 experimental 配置，设置 nuxtLink 的 trailingSlash 为 'append'，这样所有 <NuxtLink> 渲染的 href 都会自动带上斜杠。
如何处理用户输入的没有尾斜杠的 URL？
可以通过全局 client middleware 来实现 URL 的规范化，避免使用 HTTP 301 跳转。
在 SSG 阶段如何确保请求的 URL 正确命中同一文件？
通过设置 prerender.autoSubfolderIndex，确保请求 /about 和 /about/ 都能命中同一份 about/index.html 文件。
useAsyncData 的 key 应该如何设置以避免问题？
useAsyncData 的 key 应该使用 route.name 和 route.params，避免因路径不一致导致的 hydration 问题。
