为什么开发者会在每个相对路径的开头加上正斜杠？

Question

我正在为一位朋友检查一些代码，发现建立他的网站的开发人员在每一个相对路径的src、href和include前都加了一个斜杠/。

比如：

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

我以前从未见过这种情况。那么我的问题是，为什么开发人员会在相对路径的开头放置一个斜线/？

- stefmikhail

---

为什么会有踩票？我认为这是一个好问题..+1 反恐精英万岁！ - Nick Rolando

@Shredder - 谢谢你，Shedder。我已经删除了对Dreamweaver的引用。我提到它是因为这是我第一次注意到斜杠，这促使了我的问题。我从来不知道人们如此反对Dreamweaver。 - stefmikhail

Answer 1

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

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

这使得可以移动文件而不必更改到不同资源的链接。

使用您的示例：

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

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

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

假设您将文件移动到子目录中，那么使用原始根路径不需要进行任何更改，但相对路径需要更改为：

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

- Oded

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>

那么 JS 文件将会被加载 精确地 自 http://www.example.com/foo.js，无论 HTML 文件在哪里。

- Blender

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

- Si Griffiths

Answer 4

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

例如，如果您在https://example.com/上引用“/style.css”，并且您试图将其隐藏在https://proxy.example.com/example/的反向代理后面，则您的绝对引用将会中断。浏览器将请求“https://proxy.example.com/style.css”，而实际上应该请求“https://proxy.example.com/example/style.css”。

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

- user1869743

Answer 5

是的，user1869743，但你可以使用：

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

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

- user2367101