React TypeScript应用如何通过fetch读取src子目录本地JSON文件

开发阶段部分后端接口未完成，需读取src目录子文件夹下的本地JSON文件模拟HTTP接口响应，要求不将JSON文件移动到public目录，使用fetch读取时response.json()无法获取有效内容，以下是可落地的实现方案。

主流前端脚手架（CRA、Vite等）的构建逻辑中，src目录下的文件默认会做模块化编译处理，不会直接作为静态资源暴露给HTTP服务。fetch是网络请求API，只能请求被静态服务托管的资源，直接写相对路径请求src下的文件，要么返回404，要么返回空内容，自然拿不到JSON数据。

方案1：静态导入JSON（优先推荐，全脚手架兼容） #

所有主流前端构建工具原生支持JSON模块导入，无需发起网络请求，打包时会自动将JSON内容打入产物，开发环境修改JSON也能触发热更新。

// 按实际文件路径导入src下的JSON，示例路径为src/mock/user-list.json
import userListMock from './mock/user-list.json';

// 模拟接口请求
const getUserList = async () => {
  // 可加延时模拟真实接口的网络耗时
  await new Promise(resolve => setTimeout(resolve, 200));
  // 直接返回导入的JSON数据，和后端接口返回结构对齐即可
  return userListMock;
};

该方案适合固定Mock数据场景，JSON内容在构建阶段会被静态解析。

方案2：动态import懒加载（适合按需加载Mock数据场景） #

如果不希望首屏加载所有Mock数据，可以用动态import语法，构建工具会自动将JSON拆分为独立代码块，触发调用时才加载：

const getOrderListMock = async () => {
  // 动态导入src下的目标JSON文件
  const orderModule = await import('./mock/order-list.json');
  // 动态导入的JSON内容挂载在default属性上
  return orderModule.default;
};

// 调用示例
getOrderListMock().then(data => {
  console.log('模拟接口返回:', data);
});

方案3：保留fetch写法（仅Vite环境支持） #

如果习惯用fetch的调用形式，Vite环境可通过?url后缀将src下的文件转换为可被HTTP请求的静态资源地址，无需移动文件到public目录：

// 导入JSON文件对应的静态服务URL
import configMockUrl from './mock/config.json?url';

const fetchConfig = async () => {
  const res = await fetch(configMockUrl);
  if (!res.ok) throw new Error('Mock数据加载失败');
  return res.json();
};

Create React App 脚手架默认不支持该资源后缀语法，优先选择前两种方案。

• 不要直接写fetch('./xxx.json')这类相对路径，浏览器请求时的相对路径是当前页面路由地址，不是源码文件的目录路径，必然找不到目标文件
• 不要尝试引入Node.js的fs模块读取文件，浏览器运行环境没有本地文件系统访问权限，会直接抛出异常
• TypeScript 2.9及以上版本原生支持JSON模块导入，会自动根据JSON结构推导类型，无需额外编写类型声明

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