React.js项目build构建后如何动态读取指定位置的JSON文件

你使用的import data from './data.json'属于构建时静态导入，打包工具（Webpack/Vite等）在执行npm run build时会直接将JSON内容解析合并到输出的JS文件中，运行时代码不会再主动请求外部JSON文件，因此修改构建目录下的JSON文件不会生效。

• 迁移JSON文件到静态资源目录

  • Create React App项目：将data.json移动到项目根目录的public文件夹下
  • Vite搭建的React项目：将data.json移动到项目根目录的public文件夹下
    public目录下的文件不会被打包工具解析处理，构建时会原封不动复制到build输出目录的对应路径，不会被打入JS包

• 替换静态导入为运行时动态请求
  删除原来的import导入语句，在组件逻辑中通过fetch在页面运行时读取JSON文件，同时兼容http服务访问、本地直接打开HTML文件（file协议）两种场景：

import { useState, useEffect } from 'react'

function App() {
  const [data, setData] = useState(null)
  const [loadError, setLoadError] = useState(null)

  useEffect(() => {
    // 适配不同脚手架的基础路径，兼容file协议访问
    const basePath = process.env.PUBLIC_URL || import.meta.env.BASE_URL || ''
    fetch(`${basePath}/data.json`)
      .then(res => {
        if (!res.ok) throw new Error('JSON文件读取失败')
        return res.json()
      })
      .then(setData)
      .catch(setLoadError)
  }, [])

  if (loadError) return <div>配置加载失败：{loadError.message}</div>
  if (!data) return <div>加载中...</div>

  // 后续正常使用data变量即可
  return <div>{/* 页面渲染逻辑 */}</div>
}

export default App

如果你不想把JSON放在build目录根路径，比如要放到build目录下的static/config/路径，只需要：

• 在public目录下新建对应层级的文件夹static/config，把data.json放进去
• 将fetch请求的路径修改为${basePath}/static/config/data.json即可

执行npm run build完成构建后：

• 直接修改build目录下对应位置的data.json内容
• 刷新访问页面，无需重新执行构建命令即可看到更新后的内容
• 本地静态服务访问、直接双击打开build目录下的index.html两种方式都可正常运行

• 不要把需要动态修改的JSON文件放在src目录下，src目录下的所有资源都会被打包工具处理，无法实现构建后动态修改
• 如果你的项目使用了路由base配置，保持basePath的写法即可自动适配路径前缀，不会出现404问题

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