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

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

这告诉浏览器在 current 文件夹（不是根文件夹）中查找目录

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

EXACTLY

加载。

Answer 3

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

例如 主机是 www.example.com 网址变成

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" }]
}

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

在 next.config.js 中以避免反向代理冲突