前端相对路径、绝对路径，后端相对路径、绝对路径

最新推荐文章于 2025-06-03 15:16:49 发布

圈点Studio

最新推荐文章于 2025-06-03 15:16:49 发布

阅读量3.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：笔记 html json 文章标签： javascript css vue.js html html5

本文链接：https://blog.youkuaiyun.com/Cml_l/article/details/115653416

笔记同时被 3 个专栏收录

33 篇文章

订阅专栏

html

13 篇文章

订阅专栏

json

6 篇文章

订阅专栏

本文探讨前端URL路径的使用，包括dirname/、/dirname、./dirname等不同形式的相对路径。在浏览器中，这些路径有不同的解析方式，可能影响API和静态资源。推荐使用/dirname形式的相对路径，因为它不受URL变化和API影响。然而，当涉及模板引擎和动态路由时，静态资源路径可能需要与API协调，以避免冲突。理解和测试浏览器对URL的处理对于优化前端代码至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结论：为避免修改域名或者地址栏url影响我们的api和资源索引，推荐使用**/dirname**
因为这种不会影响api也不会影响静态资源

前端和后端的相对路径不太一样，前端不会有什么幺蛾子，后端因为不同的路由会打包对象放到不同的目录，这是有的相对路径就是从App开始，有的就是从子路由开始。

这次先聊聊前端的吧

*特别注意 /
*特别注意 /
*特别注意 /

在相对路径中有dirname/、/dirname、./dirname、//dirname、…/dirname。

大约有这么多，比较模糊的就是前三种：
1.dirname/ 这种路径，浏览器会讲地址栏的url和该路径拼接。
2./dirname 这种路径，浏览器会将协议、主机名和该路径拼接。
3. ./dirname 这种路径，浏览器会将地址栏的url和该路径拼接。
4. //dirname 这种路径，浏览器会将协议头和该api拼接。

下面开始代码验证。
目录结构
主要是查看图片的链接

在这里插入图片描述
这是路由，由于主要看前端，后端就简单一点

问题所在
这是我们使用ide常用的引入方式，但是一到服务器就不行了，原因就出在这里。

我个人觉得相对比绝对路径好一点，相对路径不受我们url的影响，不受api影响，而这种半相对比完全相对好一点，因为完全相对路径会受当前路径影响，还有影响api。所以推荐使用这种/dirname的方式。

下面是几个测试
第一个是首页里的index。第二个是404的index
这是几种路径

在这里插入图片描述
这是用ide预览的结果

在这里插入图片描述
这是开服务器预览的结果

下面是404页面的例子

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>前端相对url</title>
	<link rel="stylesheet" type="text/css" href="/404/css/404.css"/>
	<link rel="stylesheet" type="text/css" href="css/404.css"/>
	<link rel="stylesheet" type="text/css" href="/css/css.css"/>
	<link rel="stylesheet" type="text/css" href="index.css"/>
	<link rel="stylesheet" type="text/css" href="/src/css/src.css"/>
</head>
<body>
	<img src="404.PNG" >
	<img src="/404/404.PNG" >
	<img src="./404.PNG" >
	<img src="//404.PNG" >
	<img src="http://127.0.0.1/404/404.PNG" >
</body>
</html>

这是ide预览的结果

在这里插入图片描述
这是路由预览的结果

需要细致了解浏览器对url的拼接，还需要自己动手尝试，尝试后就明白了。

到这里有的小伙伴可能会发现，是不是用ide和服务器都能显示的1.3方案好啊！

这就涉及到后面的模板引擎了，模板引擎会将我们这种靠文件路径跳转的方式覆盖，（因为页面要动态的嘛），所以最终我们的设定并不是hostname/404来跳转404。

举一个形象的例子，比如我们文件跳转设定hostname/weblogo，来跳转登录页。但是有天我们发现这样太长了，我们api就规定hostname/logo来跳转登录，那么这时就出问题。这时候就api和资源相互污染了。随着控制欲的加强，后端的api会控制所有静态资源的权限，所以1.3这两种完全绝对的例子并不好。但如果你静态资源目录和api协调的好，也是可以用的。