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 效果。
延伸解读
SEO 影响与配置
在使用 Nuxt 框架时，确保 URL 以斜杠结尾对 SEO 有显著影响。通过配置 @nuxtjs/seo 的 trailingSlash 选项，可以有效管理 canonical link 和 sitemap.xml 的生成，避免搜索引擎将相同内容视为不同 URL，从而提升网站的搜索排名。
出站链接的处理
Nuxt 4 提供了 experimental 配置来确保出站链接的 href 始终带斜杠。这一配置虽然能自动处理大部分情况，但在代码中手动导航时仍需注意，确保所有硬编码链接都以斜杠结尾，以防未来配置变动导致的问题。
入站 URL 规范化的重要性
为了避免用户输入不带斜杠的 URL 导致的访问问题，文章中提到通过全局 client middleware 实现入站 URL 的规范化。这种方法避免了使用 HTTP 301 跳转，确保用户体验流畅，同时减少了对服务器配置的依赖。
延伸问答
为什么在 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 问题。
