Node.js NPM游戏开发：加载关卡JSON文件出现404错误

你遇到的核心问题有两个：JSON文件请求404和Sources面板看不到levels文件夹，我帮你一步步排查修复：

1. 模板字符串语法错误（最直接的404原因） #

先看loaders.js里的loadLevel函数：

export function loadLevel(name){
 return fetch('/levels/${name}.json')
 .then(r => r.json());
}

这里你用了**单引号'包裹URL，但模板字符串（${name}）必须用反引号`**才能生效！现在代码实际请求的是字面量路径/levels/${name}.json，而不是替换成1-1后的/levels/1-1.json，这直接导致了404错误。

修复后的代码：

export function loadLevel(name){
 return fetch(`/levels/${name}.json`) // 把单引号换成反引号
 .then(r => r.json());
}

2. 静态资源托管问题（Sources看不到levels的关键） #

Chrome的Sources面板看不到levels文件夹，说明你的开发服务器没有把levels目录作为静态资源托管：

• 如果你是直接用浏览器打开本地HTML文件（file://协议）：fetch API在file协议下会有跨域/权限限制，根本无法加载本地JSON文件，必须用本地服务器（比如http-server、live-server）来运行项目。
• 如果你已经在用本地服务器：检查服务器配置，确保它把levels目录包含在静态资源目录里。比如用http-server的话，直接在项目根目录启动，它会自动托管所有子目录，包括levels。

3. 路径正确性验证 #

确认你的路径和文件夹结构匹配：
你的文件夹结构是：

项目根目录/
├─ img/
│  └─ tiles.png
├─ js/
│  ├─ main.js
│  └─ loaders.js
├─ levels/
│  └─ 1-1.json
└─ index.html（假设你的HTML文件在这里）

如果服务器根目录是项目根目录，那么/levels/1-1.json是正确的绝对路径；如果你的HTML文件在其他子目录，可能需要调整为相对路径（比如../levels/${name}.json）。

额外验证步骤 #

修复后可以做这些检查确认：

• 打开Chrome的Network面板，刷新页面，查看1-1.json的请求路径是否正确，状态码是否为200。
• 确认levels目录里的1-1.json文件名没有拼写错误（比如大小写，Windows不区分，但Linux/macOS严格区分）。

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