解决HTML中JavaScript相对路径引用问题：理解文档根目录限制
在HTML页面中引入外部JavaScript文件时，很多开发者都遇到过路径引用错误的问题。明明文件放在了看似正确的位置，浏览器却提示404找不到资源，这往往和相对路径的解析规则、文档根目录的限制有关。本文将详细解释相关原理，并提供可行的解决方案。
相对路径的基本解析规则
HTML中引用外部资源的相对路径，默认是基于当前HTML文件所在的目录进行解析的，而不是基于网站的根目录。比如当前页面路径是 http://ipipp.com/blog/index.html，那么引用的 ./js/main.js 实际会解析为 http://ipipp.com/blog/js/main.js。
常见的相对路径写法有以下几种：
./js/main.js：表示当前目录下的js文件夹里的main.js，和直接写js/main.js效果一致../js/main.js：表示上一级目录下的js文件夹里的main.js/js/main.js：以正斜杠开头的路径，默认会指向网站的文档根目录，也就是http://ipipp.com/js/main.js
文档根目录的限制问题
很多开发者会误以为 /js/main.js 会指向当前项目的根目录，但实际上这个正斜杠对应的是服务器配置的文档根目录。如果你的项目是部署在子目录下的，比如访问地址是 http://ipipp.com/my-project/index.html，那么 /js/main.js 依然会指向 http://ipipp.com/js/main.js，而不是 http://ipipp.com/my-project/js/main.js，这时候就会出现路径错误。
另外，如果你是在本地直接用浏览器打开HTML文件（地址栏是 file:///C:/project/index.html 这种格式），以正斜杠开头的路径会指向本地磁盘的根目录，比如 /js/main.js 会解析为 file:///js/main.js，显然也是找不到对应文件的。
常见的解决方案
1. 使用相对于当前HTML文件的相对路径
这是最稳妥的方式，只要你能明确当前HTML文件和目标JS文件的相对位置，就可以用 ./ 或者 ../ 来拼接路径，不依赖服务器的根目录配置。
比如项目结构如下：
project/
├─ index.html
├─ about.html
└─ static/
└─ js/
├─ main.js
└─ utils.js在 index.html 中引入 main.js，就可以写：
<script src="./static/js/main.js"></script>
在 about.html 中引入的话，路径和 index.html 一致，因为两个文件都在项目根目录下。
2. 动态获取基础路径拼接
如果项目部署路径不固定，或者需要频繁引用根目录下的资源，可以在页面中先获取基础路径，再动态拼接资源路径。比如在HTML的 <head> 中先定义一个基础路径变量：
<head>
<script>
// 获取当前页面路径的基础部分，比如 http://ipipp.com/my-project/
var basePath = window.location.href.substring(0, window.location.href.lastIndexOf('/') + 1);
// 如果页面是根目录下的index.html，lastIndexOf('/')会取到域名后面的斜杠，需要做适配
if (window.location.href.indexOf('index.html') !== -1) {
basePath = window.location.href.replace('index.html', '');
}
</script>
</head>后续引入JS的时候就可以用这个变量拼接：
<script>
document.write('<script src="' + basePath + 'static/js/main.js"><\/script>');
</script>3. 使用绝对路径（明确完整URL）
如果项目部署的域名和路径固定，可以直接写完整的绝对路径，避免解析错误：
<script src="http://ipipp.com/my-project/static/js/main.js"></script>
这种方式不受相对路径规则影响，但是灵活性较差，如果域名或者部署路径变更，需要批量修改所有引用。
调试路径问题的技巧
如果遇到JS文件加载失败的问题，可以先打开浏览器的开发者工具，切换到Network面板，刷新页面后查看对应JS请求的完整URL，和实际文件存放的URL对比，就能快速定位路径问题。
另外也可以在页面中先输出当前页面的URL，确认基础路径是否正确：
<script>
console.log('当前页面URL:', window.location.href);
</script>通过输出的URL就能清楚知道相对路径的解析基准，进而调整引用路径的写法。
HTMLJavaScript相对路径文档根目录路径引用 本作品最后修改时间：2026-05-22 13:19:04