如何编辑React生产构建包中的JSON文件

问题原因 #

你当前的写法下，前端构建工具（如Webpack、Vite等）在编译时会把通过require引入的JSON内容直接内联打包进最终的JS产物中，JSON文件本身不会作为独立资源输出，因此build后你找不到对应的文件，也无法通过修改JSON直接更新页面内容。

可行方案 #

将JSON文件作为静态资源处理，不参与构建内联，步骤如下：

• 找到项目根目录下的public文件夹（如果没有可以自行创建，主流前端脚手架都默认支持该目录的静态资源拷贝逻辑），在其中新建config目录，把download.json移动到public/config路径下
• 修改代码逻辑，改为运行时异步请求获取JSON内容，参考代码如下：

import { useState, useEffect } from 'react'
import Link from '你的Link组件引入路径'

const Nav = () => {
  const [fileInfo, setFileInfo] = useState({
    file: 'download.png',
    loading: true
  })

  useEffect(() => {
    // 运行时请求独立的JSON配置文件
    fetch('/config/download.json')
      .then(res => res.json())
      .then(data => {
        setFileInfo({
          file: data.file,
          loading: false
        })
      })
      .catch(err => {
        console.error('加载配置失败', err)
        setFileInfo(prev => ({...prev, loading: false}))
      })
  }, [])

  if (fileInfo.loading) return null // 可替换为你需要的加载态样式

  const filePath = "download/" + fileInfo.file;

  return (
    <Link className="dcm0cujv48 abled" to={filePath} target="_blank" download={fileInfo.file}>
        <p className="fs-14 fw-700 wspwho0gps">
            <i class="fas fa-cloud-download-alt fs-14"></i>
            Download
        </p>
        <p className="yb08fmpwlp"></p>
    </Link>
  )
}

• 重新执行npm run build，构建完成后你就可以在产物的config目录下找到download.json文件

注意：如果你的网站部署在域名子路径下，需要给fetch的路径加上对应子路径前缀，避免请求404。

后续第三方要修改内容时，直接替换该JSON文件即可，不需要重新打包构建，刷新页面就会生效。

内容的提问来源于stack exchange，提问作者Gem Eliezer Espiritu