React应用将JSON文件从public移至src后无法识别，正确路径应如何设置？

核心原因 #

public目录的文件会在项目构建时直接原封不动输出到最终部署的产物根目录，你之前写的const url = "./nfl2021.json"是运行时通过HTTP请求拉取静态资源，路径对应构建后的产物路径，所以能正常访问。而src目录下的文件默认不会作为独立静态资源输出到构建产物，直接写相对路径请求会404。

注意：运行时请求的静态资源路径与你的源码目录结构没有直接关联，只和构建后产物的目录结构、部署路径有关，不要用源码文件的相对位置写运行时请求的资源路径。

方案1：构建时直接引入JSON（推荐，无额外请求） #

如果你不需要运行时动态拉取该JSON，直接在app.js中通过ES模块导入语法引入即可，路径按源码的相对路径写：

// app.js 与 nfl2021.json 同级，直接导入
import nfl2021Data from './nfl2021.json'
// 直接使用数据，无需额外fetch请求
console.log(nfl2021Data)

该方案适配所有主流前端脚手架（React/Vue/Angular等，底层webpack/vite都默认支持JSON模块导入）。

方案2：需要运行时通过请求拉取JSON #

如果你确实需要保留fetch/axios请求拉取的逻辑，有两个可选处理方式：

• 优先建议将JSON文件放回public目录，不需要修改原有请求路径即可正常运行
• 坚持放在src目录的话，需要修改脚手架配置，给JSON文件配置静态资源输出规则：
  • 如果你用Vite：直接将url赋值为new URL('./nfl2021.json', import.meta.url).href即可，示例：

    const url = new URL('./nfl2021.json', import.meta.url).href
    fetch(url).then(res => res.json()).then(data => console.log(data))
    

  • 如果你用Webpack 5+：需要在webpack配置中新增规则，将src下的指定JSON文件通过asset/resource类型单独输出到静态资源目录，再匹配对应的访问路径。

内容的提问来源于stack exchange，提问作者John G.