React项目本地npm run start正常，npm run build后无法加载元素求排查建议

• 确认静态资源引用路径
  检查代码中图片、字体等资源的引用方式：避免使用绝对路径（如/src/assets/image.png），改用相对路径（如./assets/image.png）或通过import引入资源后使用变量引用（如import Image from './assets/image.png';再在组件中用<img src={Image} />）。绝对路径在build后会指向服务器根目录，本地运行时无法正确解析。

• 验证build产物的资源路径
  打开build文件夹中的index.html，查看其中js、css、图片等资源的引用路径是否为相对路径（如./static/js/main.xxx.js）。如果是绝对路径（如/static/...），检查package.json中的homepage配置是否正确放置在顶层（不能嵌套在其他字段下），确认拼写为"homepage": "."且无语法错误。

• 用本地服务器运行build包
  不要直接双击index.html打开，浏览器对本地文件的路径解析和跨域限制会导致资源加载失败。使用本地服务器运行：

  1. 全局安装serve工具：npm install -g serve
  2. 进入build目录执行：serve -s
     或在项目package.json中添加脚本："serve": "serve -s build"，然后执行npm run serve

• 检查public文件夹资源的引用
  放在public文件夹下的资源，引用时需使用相对路径（如./data.json）而非绝对路径（如/data.json）。homepage: "."会将根路径设为当前目录，绝对路径会指向服务器根目录，本地运行时无法找到对应资源。

• 排查路由配置（若使用React Router）
  如果使用BrowserRouter，build后本地运行会因服务器缺少路由重写配置导致子路由访问失败或资源加载异常。临时改用HashRouter测试，若问题解决，说明需要在服务器端配置路由重写（如nginx配置try_files $uri $uri/ /index.html;）。

• 检查自定义webpack配置（若eject或使用重写工具）
  若项目使用eject、craco或react-app-rewired自定义了webpack配置，确认output.publicPath是否设置为./。该配置会覆盖homepage的默认影响，需确保值为publicPath: process.env.PUBLIC_URL || './'。

• 核对资源文件名大小写
  开发环境（npm start）通常忽略文件名大小写，但build后在区分大小写的文件系统（如Linux）中会报错。检查所有资源引用的文件名与实际文件系统中的文件名大小写完全一致（如代码中写./Assets/logo.png，实际文件是./assets/Logo.png会导致加载失败）。

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