为什么开发人员要在每个相对路径的开头放置一个正斜杠？

Question

我正在为一位朋友检查一些代码，发现构建其网站的开发人员开始了每一个相关的 src、href 和 include 带有正斜杠 /。

例如：

src="/assets/js/jquery.js"

我以前从未见过这个。所以我的问题是，为什么开发人员要在相对路径的开头放置正斜杠 / ？

Answer 1

这样做是为了根路径（使其成为绝对路径）。

它确保路径不是相对的，而是从站点的根目录读取的。

这允许人们移动文件而不必更改到不同资源的链接。

使用您的示例：

src="/assets/js/jquery.js"

如果引用文件位于 /pages/admin/main.html （例如）中，使用相对路径，您将使用：

src="../../assets/js/jquery.js"

假设您将文件移动到子目录。原始根路径不需要更改，但相对路径需要更改为：

src="../../../assets/js/jquery.js"

Answer 2

添加 @Oded 的回答，斜杠使 URL 绝对化。

例如：

/foo/bar/baz.css

这转化为：

http://www.example.com/foo/bar/baz.css

但是如果没有斜杠，事情会变得有点不同：

foo/bar/baz.css

这告诉浏览器在当前文件夹（而不是根文件夹）中查找目录foo 然后是后续目录和文件。

---

另外，以这个 HTML 为例：

<script type="text/javascript" src="foo.js"></script>

如果您将 HTML 文件移动到另一个文件夹中，则脚本将不会加载，因为 foo.js 不会随 HTML 文件一起移动。

但如果您使用绝对 URL：

<script type="text/javascript" src="/foo.js"></script>

那么无论 HTML 文件位于何处，JS 文件都会从 http://www.example.com/foo.js 加载完全 。

Answer 3

这是为了确保资产来自 Web 服务器的“根”。

例如
主机是 www.example.com
URL 变为 www.example.com/assets/js/jquery.js

我对我希望确保在其自己的虚拟主机上运行的项目执行此操作。

问题实际上归结为这些资产包含在哪里。例如，如果资产包含在 /help/pages/faq 中，那么当站点托管在不变的主机（例如 example.com）上时，开发人员可以确保该路径能够正常工作。

使用相对路径“assets/js/jquery.js”的问题是，如果资产包含在 /help/pages/faqs 中，则路径将变得相对于该起点，例如 /help/pages/faqs/assets /js/jquery.js

Answer 4

这有点偏离主题，但如果您的应用程序有可能在子路径下的反向代理（例如使用 apache2 或 nginx）后面提供服务，您应该尽量避免绝对路径。

例如，如果您在 https://example.com/ 上引用“/style.css”，并且您尝试过将其隐藏在 https://proxy.example.com/example/ 的反向代理后面，你的绝对参考会被破坏。当浏览器应该请求“https://proxy.example.com/example/style.css”时，它会向“https://proxy.example.com/style.css”发出请求。

来自前导正斜杠的无意绝对路径对于反向代理来说是一场噩梦。

Answer 5

是的 user1869743，但您可以使用：
<代码>

async rewrites() {
    return [{ source: "/" + name + "/_next/:path", destination: "/_next/:path" }]
}


 <代码>
in the next.config.js to avoid reverse proxies conflict