为何href="/"在宿主设备指向系统文件而非index.html？

架构老林

2026-5-27

问题原因分析与解决方案

这个问题我之前帮不少开发者排查过，核心原因其实是访问协议的差异导致的路径解析逻辑不一样，我给你拆解一下：

为什么其他设备访问正常？

当其他设备通过网络访问你的部署页面时，它们用的是HTTP/HTTPS协议（比如地址是http://你的宿主设备IP/）。这时候你的Web服务器会把href="/"中的/解析为网站的根目录，也就是你部署项目的那个文件夹根目录，自然会返回index.html页面，完全符合预期。

宿主设备为什么会指向系统文件？

如果你的宿主设备是直接双击打开本地的HTML文件（而不是通过Web服务器访问），那么浏览器用的是file://协议来加载页面（地址栏会显示类似file:///C:/你的项目文件夹/index.html这样的路径）。

在file://协议下，/代表的是本地文件系统的根目录——Windows里就是盘符根目录（比如C:/），Linux/macOS里就是系统根目录/。这时候点击href="/"，浏览器就会跳转到本地文件系统的根目录，而不是你的项目根目录，所以才会出现指向系统文件的异常。

解决办法

你可以根据自己的需求选下面两种方案：

推荐：宿主设备也通过Web服务器访问
启动一个本地Web服务器来运行你的项目，比如：
- Python 3用户可以在项目根目录执行：python -m http.server
- Node.js用户可以先安装http-server（npm install -g http-server），然后执行：http-server
  之后在宿主设备浏览器访问http://localhost/，这时候href="/"就会被服务器解析为项目根目录，和其他设备访问的逻辑完全一致了。
适配file://协议：改用相对路径
如果确实需要直接打开本地HTML文件，可以把锚点的href改成相对路径：
```
<a id="indexLink" href="./"><img src="images/logo.png" /></a>
```
或者直接指定文件名：
```
<a id="indexLink" href="index.html"><img src="images/logo.png" /></a>
```
这样不管是用file://还是HTTP协议访问，路径都会指向当前目录下的index.html。