ReactJS项目本地正常部署后点击按钮白屏 日志报304及静态文件缺失错误

问题根因 #

• publicPath配置错误：React打包默认的publicPath为根路径/，如果项目部署在域名子目录下，打包后的资源会默认从服务端根目录查找，匹配不到对应路径的chunk文件和favicon。
• 资源未全量上传：打包生成的带哈希后缀的chunk文件可能因上传中断、部署脚本过滤规则、旧资源未清理等问题，导致服务端部署目录缺失部分文件。
• 服务端路由配置冲突：如果使用BrowserRouter模式，服务端未配置路由回退规则，前端路由跳转后浏览器会把路由路径当作静态资源路径发起请求，触发文件不存在错误。
• 浏览器缓存问题：日志中的304状态码说明浏览器加载了本地缓存的旧版index.html，文件内引用的旧哈希chunk文件已经被新版打包资源替换，服务端不存在对应旧文件就会报错。

解决方案 #

• 修正publicPath配置
  若为Vite项目，在vite.config.js中配置base字段：部署在根目录设为/，部署在子目录设为对应子目录路径，例如/react-app/。
  若为Create React App项目，在package.json中新增"homepage": "."配置，或在.env文件中配置PUBLIC_URL=对应部署路径。
• 全量校验部署资源
  打包完成后对比本地build目录和服务端部署目录的文件数量、哈希后缀是否完全一致，部署前先清理服务端旧静态资源，避免新旧资源混布。
• 配置服务端路由回退规则
  若使用Nginx服务，在站点配置中添加如下规则：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

  若使用Apache服务，在.htaccess文件中添加对应回退规则，确保所有路由请求都返回index.html，交由前端路由处理跳转逻辑。
• 优化静态资源缓存策略
  配置Nginx对index.html设置不缓存规则，避免浏览器加载旧版入口文件：

  location = /index.html {
    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
  }
  

• 修正favicon路径
  确保favicon.ico文件存放在项目public目录下，打包后会自动输出到build根目录，也可在index.html中手动指定favicon的绝对路径。

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