在开发前端应用程序时，我们经常需要引用其他文件或资源。为了让浏览器正确加载这些文件，我们需要指定它们的路径。在这个过程中，相对路径和绝对路径是最常用的两种路径类型。
什么是相对路径？
相对路径是基于当前文件所在位置的相对位置指向其他文件或资源的路径。相对路径包括两种形式：相对于当前页面的路径和相对于当前资源的路径。相对路径通常以 "./" 或 "../" 开头。
- "./" 表示当前目录。例如，"./style.css" 将引用同一目录下的 "style.css" 文件。
- "../" 表示上级目录。例如，"../images/logo.png" 将引用上一级目录中的 "images/logo.png" 文件。
以下是一个简单的例子：
-- -------------------- ---- -------
-- ----------
--------- -----
------
------
----- ---------------- -------------------
-------
------
---- ------------------------ -----------
-------
-------
-- ---------
---- -
----------------- --------
-在这个例子中，index.html 引用了 style.css 和 logo.png 文件。"./style.css" 表示从 index.html 同一目录下引用 style.css 文件。"../images/logo.png" 表示从 index.html 上一级目录中的 images 目录下引用 logo.png 文件。
什么是绝对路径？
绝对路径是指从网站根目录或服务器文件系统的根目录开始的完整路径。它以斜杠（/）开头，例如 "/images/logo.png"。
以下是一个简单的例子：
-- -------------------- ---- -------
-- ----------
--------- -----
------
------
----- ---------------- ----------------------
-------
------
---- ---------------------- -----------
-------
-------
-- ----
-
--- ---
- --- ---------
--- ------
--- --------在这个例子中，index.html 引用了 /css/style.css 和 /images/logo.png 文件。"/css/style.css" 表示从网站根目录下引用 css 目录中的 style.css 文件。"/images/logo.png" 表示从网站根目录下引用 images 目录中的 logo.png 文件。
相对路径与绝对路径的比较
相对路径和绝对路径都可以用来引用其他文件或资源。但是，它们之间有一些明显的区别。
1. 可移植性
相对路径更具可移植性，因为它们是相对于当前文件位置的，并且可以在不同的文件系统或服务器上使用。
绝对路径则不太具有可移植性，因为它们依赖于文件系统或服务器的根目录，因此需要在不同的环境中进行更改。
2. 简洁性
相对路径通常比绝对路径更简洁，因为它们只包含必要的信息，不包含主机名或协议等额外的信息。
绝对路径则比较冗长，因为它们需要包含完整的 URL，包括主机名、端口和协议等信息。
3. 容错性
相对路径具有更好的容错性，因为它们始终相对于当前文件位置，因此即使文件位置发生变化，它们仍然可以正确引用其他文件或资源。
绝对路径则具有一定的风险，因为它们依赖于服务器文件系统的结构和根目录的位置。如果文件位置发生变化，可能导致引用错误的文件或资源。
如何选择路径类型
在选择路径类型时
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27159