在开发Web项目时，我们经常会遇到HTML中引用的JavaScript文件加载失败的情况，很多时候问题就出在相对路径的解析上，而理解Web服务器的文档根目录是解决问题的核心。
相对路径的基本解析规则
HTML中引用外部JavaScript时使用的相对路径，基准是当前HTML文件的访问路径，而不是文件在本地磁盘中的存储路径。比如当前HTML的访问地址是http://localhost/js/test.html，那么相对路径./utils.js会指向http://localhost/js/utils.js。
常见的相对路径写法有以下几种：
./js/app.js：表示当前目录下的js文件夹中的app.js../lib/tools.js：表示上一级目录下的lib文件夹中的tools.js/static/main.js：以斜杠开头的路径，会基于文档根目录解析
Web服务器文档根目录的作用
Web服务器会把一个指定的本地文件夹作为文档根目录，所有对服务器的HTTP请求，都会把请求路径拼接到文档根目录后面去寻找对应的资源。比如我们把D:/web_project设置为文档根目录，那么请求http://localhost/js/main.js时，服务器会去D:/web_project/js/main.js找这个文件。
如果文档根目录设置错误，或者混淆了本地路径和访问路径，就会出现路径引用失败的问题。比如本地文件结构是：
D:/web_project ├─ index.html ├─ js │ └─ app.js └─ lib └─ tool.js
常见错误案例与解决方法
案例1：本地直接打开HTML文件
如果直接双击HTML文件在浏览器打开，访问路径会是file:///D:/web_project/index.html，此时相对路径./js/app.js会指向本地文件路径，但是如果服务器没启动，涉及到服务器路径的请求就会失败。解决方法是启动Web服务器，通过http://localhost开头的地址访问页面。
案例2：斜杠开头的路径解析错误
在index.html中写<script src="/js/app.js"></script>，如果文档根目录是D:/web_project，那么会正确找到D:/web_project/js/app.js。但如果误以为斜杠是本地磁盘根目录，就会找不到文件，需要明确斜杠开头的路径是基于文档根目录解析的。
案例3：目录层级变化导致路径失效
如果把index.html放到pages文件夹下，原路径./js/app.js就会指向pages/js/app.js，找不到文件。此时可以改成../js/app.js回到上一级目录找js文件夹，或者统一使用基于文档根目录的绝对路径/js/app.js。
验证路径是否正确的方法
可以在浏览器开发者工具的Network面板查看JavaScript文件的请求地址，看是否和预期的文件路径一致。如果返回404，就把请求地址去掉域名部分，拼接到文档根目录本地路径后面，看本地是否存在这个文件，就能快速定位问题。
下面是一个正确的引用示例，假设文档根目录是D:/web_project，index.html在根目录下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>路径测试</title>
<!-- 基于文档根目录的引用 -->
<script src="/js/app.js"></script>
<!-- 相对当前文件的引用 -->
<script src="./js/app.js"></script>
</head>
<body>
<p>测试JavaScript路径引用</p>
</body>
</html>只要搞清楚相对路径的基准和文档根目录的映射关系，大部分JavaScript路径引用问题都可以快速解决。
JavaScriptHTML相对路径文档根目录Web服务器修改时间：2026-05-25 10:38:58