使用Parcel Live Server时，fetch无法加载本地JSON文件

问题原因 #

你遇到的错误是因为Parcel开发服务器默认启用单页应用路由 fallback，当请求的test.json路径没有匹配到对应输出文件时，会返回index.html，导致解析JSON时遇到HTML的<!DOCTYPE>标签报错。而VS Code Live Server是静态文件服务器，会直接返回test.json文件，所以能正常运行。另外你的test.json还有语法错误（最后一个属性后的多余逗号），也会影响解析。

修复步骤 #

1. 修正test.json的语法错误 #

去掉age属性后的多余逗号，正确的JSON内容：

{
  "name": "John",
  "age": 25
}

2. 方法一：用ES模块直接导入JSON（推荐） #

Parcel支持直接导入JSON文件，无需使用fetch，修改index.js：

import testData from './test.json';

function loadFiles() {
  console.log(testData);
}

Parcel会在构建时将JSON内容注入到代码中，避免网络请求，更高效。

3. 方法二：使用public目录存放静态资源 #

如果坚持用fetch，创建public目录，将test.json放入该目录，然后修改fetch路径：

function loadFiles() {
  fetch("/test.json")
    .then((response) => response.json())
    .then((json) => console.log(json));
}

Parcel会将public目录下的文件原封不动复制到输出目录的根路径，此时请求/test.json就能正确获取到JSON文件。

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