服务器与本地环境下JS文件路径解析差异问题求助

首先得搞清楚为什么本地和服务器上路径解析不一样——浏览器解析JS文件内的相对路径时，是基于当前页面的URL（也就是页面的基准路径），而不是JS文件本身所在的路径。

你本地环境里，不管是直接用file://打开index.html，还是本地服务器的URL结构和文件目录完全对应，页面的基准路径都是index.html所在的根目录。这时候JS里的../../img/circle.jpg是从js/components/往上两级回到根，再指向img/，路径是对的。但部署到服务器后，页面的基准路径变成了域名的根（比如http://yourdomain.com/），这时候../../img会被解析成http://yourdomain.com/../../img，这显然是不存在的路径，而直接用img/circle.jpg就是从域名根出发，自然能找到资源。

至于HTML里的路径没问题，是因为HTML标签的src/href属性的相对路径，本身就是基于页面基准路径来解析的，index.html在根目录，js/components/functions.js这个路径不管本地还是服务器都能正确指向JS文件，所以没出问题。

不用修改JS内所有路径的解决方案 #

推荐两种靠谱的方法，都不用批量改JS里的路径：

方法1：动态获取JS文件的所在路径，拼接资源地址 #

在functions.js里，先获取当前脚本文件的URL，再提取出它的目录，最后拼接你要访问的资源路径。这样不管本地还是服务器，路径都会自动适配：

// 获取当前执行的脚本文件的完整URL
const currentScript = document.currentScript;
const scriptUrl = currentScript.src;
// 提取脚本所在的目录（比如本地是http://localhost/js/components/，服务器是https://yourdomain/js/components/）
const scriptDir = scriptUrl.substring(0, scriptUrl.lastIndexOf('/') + 1);
// 用脚本目录拼接原来的相对路径，得到正确的资源地址
const circleImgPath = scriptDir + '../../img/circle.jpg';

// 之后用circleImgPath去加载图片即可，比如：
const img = new Image();
img.src = circleImgPath;

这个方法的核心是让JS自己“知道”自己在哪里，再去定位资源，完全不受页面基准路径的影响。

方法2：给页面设置<base>标签统一基准路径 #

在index.html的<head>里添加一个<base>标签，强制页面所有相对路径都以根目录为基准：

<head>
  <!-- 其他head内容 -->
  <base href="/">
</head>

如果你的本地服务器也是以根目录为基准运行（比如用http://localhost访问，而不是直接打开file://文件），可以把JS里的路径统一改成/img/circle.jpg（相对于根的绝对路径），这样跨环境就不会有问题。不过如果不想修改原有JS路径，方法1会更灵活。

另外还有个小建议：以后写资源路径时，尽量用相对于根的绝对路径（比如/img/circle.jpg），这样不管页面在哪里，资源都能正确找到，从根源避免这种跨环境的路径问题。

内容的提问来源于stack exchange，提问作者user9789629