Fetch加载同目录HTML文件失败，求正确路径写法

阿华AIGC实验室

2026-5-7

解决JS文件加载同目录资源的路径问题

我之前遇到过一模一样的坑！要加载当前JS文件同目录的资源，核心问题是：fetch的相对路径是基于当前页面的URL，而不是JS文件本身的位置——如果你的JS是被其他目录的页面引入的，那之前试的./、-/都会失效。给你几个简单靠谱的解决方法：

方法1：ES模块环境下用`import.meta.url`（最推荐）

如果你的JS是ES模块（比如脚本标签加了type="module"，或者用了import/export语法），这个属性能直接拿到当前JS文件的完整URL，再通过new URL()构造同目录的资源路径，绝对不会错：

// 基于当前JS文件的URL，构造同目录的sdk-article.html路径
const articleUrl = new URL('sdk-article.html', import.meta.url);

fetch(articleUrl)
  .then(stream => stream.text())
  .then(text => define(text));

这个方法完全不依赖页面的位置，不管JS被哪个页面引入，都能精准指向同目录的文件。

方法2：传统脚本用`document.currentScript`

如果你的JS是传统非模块脚本，可以通过获取当前执行的script标签的src属性，解析出JS文件的目录路径：

// 同步获取当前执行的script标签（异步代码里可能失效，所以放脚本顶部）
const currentScript = document.currentScript;
// 截取JS文件所在的目录路径
const scriptDir = currentScript.src.substring(0, currentScript.src.lastIndexOf('/') + 1);
// 拼接同目录的资源路径
const articleUrl = scriptDir + 'sdk-article.html';

fetch(articleUrl)
  .then(stream => stream.text())
  .then(text => define(text));

注意：document.currentScript只能在脚本同步执行阶段拿到，别放在setTimeout或者异步回调里用。