React项目在Netlify部署成功但资源加载失败（404错误）求助

针对你遇到的本地运行正常、Netlify部署后出现资源404的问题，按以下步骤排查解决：

• 检查package.json的homepage配置
  Create React App默认会假设你的应用部署在域名根目录，若部署环境路径不符，会导致资源路径错误。打开项目根目录的package.json，添加或修改"homepage": "."，设置为相对路径后重新构建部署。

• 确认Netlify的构建配置
  登录Netlify后台进入你的项目，在Site settings > Build & deploy > Build settings里：

  • 确保Build command是npm run build
  • 确保Publish directory是build（Create React App打包后的默认输出目录）
    如果配置错误，Netlify会找不到正确的静态资源文件。

• 检查资源引用的路径格式
  本地开发时绝对路径（比如/static/js/xxx.js）能正常加载，但线上部署时可能因为路径前缀问题失效。确保项目中所有资源（图片、JS/CSS文件）都使用相对路径引用，比如./assets/icon.png而非/assets/icon.png。

• 配置SPA路由重写规则（若使用React Router）
  如果你的项目包含路由跳转，直接访问子路由或刷新页面时会触发404。在项目的public目录下创建_redirects文件，写入以下内容：

  /*    /index.html   200
  

  这个规则会让Netlify将所有请求指向index.html，适配React单页应用的路由机制。

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