React应用部署后无法加载JS文件及public目录下JSON文件问题求助

云原生阿岚

2026-9-24

问题根因

这两类报错核心是两类配置不匹配导致的：React打包的公共路径配置、部署侧反向代理的路径映射规则。端口访问时服务默认根路径直接指向打包产物目录，路径匹配不会出错，绑定域名后配置不匹配就会触发静态资源加载失败。

分步修复方案

1. 修正打包公共路径配置

若使用Create React App搭建项目：打开根目录package.json，添加配置项 "homepage": "."，如果应用明确部署在域名根路径，也可以直接写完整域名 "homepage": "https://test.project.bg"
若使用Vite搭建项目：打开根目录vite.config.js，在导出的配置对象中添加 base: './'，或者配置为域名根路径 base: 'https://test.project.bg/'
配置修改完成后必须重新执行npm run build生成新的打包产物，用新产物部署才会生效

2. 修正JSON文件的请求路径

不要写固定的绝对/相对路径，用环境变量拼接资源路径，保证不管部署在什么路径下都能匹配到public目录的文件：

CRA项目写法：

const jsonPath = `${process.env.PUBLIC_URL}/你的文件名.json`
fetch(jsonPath).then(res => res.json())

Vite项目写法：

const jsonPath = `${import.meta.env.BASE_URL}/你的文件名.json`
fetch(jsonPath).then(res => res.json())

3. 调整反向代理配置（以Nginx为例）

确认自定义域名对应的站点配置，根目录指向正确的打包产物文件夹：

server {
  listen 80;
  server_name test.project.bg;
  # 此处路径替换为你项目打包后build（CRA）或dist（Vite）文件夹的绝对路径
  root /www/your-react-project/build;
  index index.html;

  # 解决单页应用路由刷新404问题，同时保证静态资源路径正确匹配
  location / {
    try_files $uri $uri/ /index.html;
  }
}

配置修改后执行nginx -s reload重载配置生效。