绝对路径和相对路径：让我吃过亏才真正理解的区别

你应该猜不到，我第一次建站时犯的最蠢的错误是什么——

所有图片链接全部写成了 http://localhost/images/abc.jpg。

上传到服务器后，所有图片全挂。因为服务器上没有叫”localhost”的东西。

一句话理解： 绝对路径告诉浏览器”从世界上哪里能找到这个文件”，相对路径告诉浏览器”相对于当前页面的位置”——能省事，但换个环境可能就断了。

绝对路径：从头到尾的完整地址

绝对路径分两种：

<!-- 网络绝对路径 -->
<img src="https://6mal.com/images/logo.png">

<!-- 本地绝对路径（专业开发者几乎不用，只在本机测试时偶尔出现） -->
<img src="C:/website/images/logo.png">

网络绝对路径的好处是： 不管这个代码出现在哪（你的网站、别人的网站、RSS 订阅邮件），它都能正确加载。

缺点呢？换域名或迁移时就头疼了。

经验之谈： 我之前接手过一个项目，所有资源链接写死了 http://old-domain.com/xxx/。后来公司域名换了，整个网站的图片、CSS、JS 全部需要批量替换——500 多个文件，改了两天。从那以后我立了个规矩：站内资源除非有特殊理由，否则不用绝对路径。

相对路径：灵活的”当前位置”定位

相对路径是前端开发里最常用的方式：

<!-- ./ 表示当前目录 -->
<img src="./images/photo.jpg">

<!-- ../ 表示上一级目录 -->
<img src="../images/photo.jpg">

<!-- ../../ 表示上两级目录 -->
<img src="../../images/photo.jpg">

<!-- / 表示网站根目录（以 / 开头） -->
<img src="/images/photo.jpg">

相对路径最大的好处是移植性。你把整个网站从 6mal.com 搬到 example.com，所有路径依然有效——因为它们不依赖域名。

写法	含义	类比
`./image.jpg`	当前目录	“就在旁边的房间”
`../image.jpg`	上级目录	“上一层楼”
`../../image.jpg`	上两级目录	“上两层楼”
`/image.jpg`	根目录	“从大楼正门出发”

绝对路径在 SEO 中的特殊作用

很多人不知道，站内链接用绝对路径对 SEO 有好处。

具体来说有两个场景：

场景一：防止文章被转载时断链

如果你的文章被其他网站转载，文中用相对路径写的链接会变成转载网站域名下的路径。

1 2	原文链接：<a href="/archives/28/">绝对和相对路径</a> 被转载后：<a href="taobao.com/archives/28/">绝对和相对路径</a>

转载者的域名当然没有 /archives/28/，所以这个链接会 404。

如果用绝对路径写：

1 2	原文链接：<a href="https://6mal.com/archives/28/">绝对和相对路径</a> 被转载后：<a href="https://6mal.com/archives/28/">绝对和相对路径</a>

不管在哪，链接都指向原始网站。这本质上是一个版权保护策略。

场景二：防止域名镜像

如果有人把你的域名指向他的 IP，做了一个镜像站，你所有的相对路径都会在镜像站上正常显示——因为你没有给搜索引擎一个”这是原作者”的信号。

而绝对路径会让搜索引擎知道：“所有内部链接都指向这个域名，它才是正主。”

容易被忽视的 `<base>` 标签陷阱

<base> 标签可以改变相对路径的基准位置：

<head>
  <base href="https://6mal.com/blog/">
</head>
<body>
  <!-- 这个图片实际会加载 https://6mal.com/blog/images/logo.png -->
  <img src="images/logo.png">
</body>

这个功能听起来方便，但实际开发中我建议不要轻易使用。原因很简单：它改变了页面上所有相对路径的计算基准。

如果在用了 <base> 的页面里引入了第三方库，第三方库里的相对路径也会受影响——很可能导致引用失效。

经验之谈： 我记得在一个项目中，有人为了偷懒加了 <base> 标签，结果导致所有动态加载的组件路径全部报错。排查了两个小时才找到根因——从那以后 base 标签就被我列入了”除非有 100% 的把握，否则别用”清单。

SPA 下的路径问题

如果你用 React、Vue 等框架做单页应用，路径逻辑会多一层复杂性：

开发环境下，<img src="/image.png"> 指向的是 localhost:3000/image.png
部署到服务器后，如果路由用了 createBrowserHistory，同样的路径指向的是 domain.com/image.png
如果部署在子目录（domain.com/app/），/image.png 会指向 domain.com/image.png 而不是 domain.com/app/image.png

这就是为什么 SPA 框架通常需要配置 publicPath 或 baseUrl：

// Vite 配置
export default defineConfig({
  base: '/app/',  // 相当于非 HTML 资源的 base 标签
})

// Next.js 配置
const nextConfig = {
  basePath: '/app',
  assetPrefix: 'https://cdn.example.com',
}

总结：什么时候用哪种

场景	推荐写法	原因
站内图片、CSS、JS	相对路径 `./src/style.css`	迁移方便
站内文章链接	绝对路径 `https://6mal.com/a/`	SEO + 转载断链保护
站外链接	绝对路径 `https://other.com/a`	必须用完整地址
CDN 资源	绝对路径 `https://cdn.xxx.com/lib.js`	资源来自外部源
开发环境	相对路径 `./assets/`	本地测试、多环境适配