在开发网站时，一个常见的问题就是 URL 的结尾是否应该包含斜杠。需要注意的是，在某些情况下，URL 的结尾含有斜杠和不含有斜杠推断出的意义是不同的。
例如，访问 https://example.com/about 和 https://example.com/about/ 结尾的意义是不同的，在前者的情况下，浏览器会尝试获取名为“about”的文件，而在后一个的情况下，浏览器会尝试获取名为“about”文件夹中的默认页面。
由于这种微小的差异很容易导致用户访问错误的页面，因此一些开发人员推荐在 URL 的结尾添加斜杠，以保持一致性。这就是为什么有些人会将 gatsby 网站的 URL 设计为：/about/ 而不是 /about。
然而，在使用 gatsby 开发时，似乎无法有效地自定义有或没有斜杠的 URL，这时可以使用 gatsby-plugin-remove-trailing-slashes，这是一个简单而有效的 npm 包，它可以帮助你控制 gatsby 网站的 URL 细节。
安装
使用 npm 进行安装：
npm install gatsby-plugin-remove-trailing-slashes
配置
然后，在 gatsby-config.js 文件中，将其添加为插件：
// gatsby-config.js
module.exports = {
plugins: [
`gatsby-plugin-remove-trailing-slashes`,
]
}示例
让我们来看一个简单的示例：
- 假设你有两个页面：/about 和 /contact，并且希望它们的 URL 不以斜杠结尾。
- 那么在 gatsby-config.js 文件里添加 gatsby-plugin-remove-trailing-slashes 就可以做到。
-- -------------------- ---- -------
-- ----------------
-------------- - -
-------- -
----------------------------------------
--
----------- -------------------
------------- -
------ ------- ---- -----
------------ -- ------ ------ ---- -----
------- ------------
-------- --------------------------------------
--
-添加 pathPrefix 不是必须的，这只是为了在开发服务器和生成的静态文件中保持一致。
总结
在这篇文章中，我们学习了如何使用 gatsby-plugin-remove-trailing-slashes 创建 gatsby 网站的 URL 详情，尽管这只是一个小技巧，但它确实为网站的用户体验提供了很大的帮助。
我们也讨论了该插件的基本用法和示例。现在你已经掌握了这个技巧，所以你可以使用它来更好地控制你的 gatsby 网站 URL 的结尾是含有或不含有斜杠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/gatsby-plugin-removes-trailing-slashes