React应用部署故障：build文件夹加载异常及跨浏览器显示问题

针对你遇到的Chrome正常、Safari/移动端空白，以及本地调试build文件夹报错的问题，按以下步骤排查解决：

1. 配置SPA路由 fallback（核心解决Safari空白问题） #

React单页应用（SPA）使用BrowserRouter时，服务器需要将所有非静态资源请求转发到index.html，否则直接访问子路径或刷新页面会出现404，这也是Safari/移动端空白的常见原因。
在BlueHost的CPanel文件管理器中，进入你上传build文件的根目录，创建.htaccess文件，写入以下内容：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

保存后刷新网站测试。

2. 修正build资源路径 #

检查项目根目录的package.json中的homepage字段：

• 若部署在域名根目录，设置"homepage": "."或删除该字段；
• 若部署在子目录（如yourdomain.com/your-app），设置"homepage": "/your-app/"。
  修改后重新执行npm run build，上传新的build文件夹到服务器，确保静态资源引用路径正确。

3. 本地调试build文件夹的正确操作 #

直接双击打开index.html会使用file://协议，导致资源路径失效，正确调试方式：

1. 全局安装serve工具：npm install -g serve
2. 进入项目根目录，执行命令：serve -s build
3. 访问终端输出的本地HTTP地址（如http://localhost:3000），而非file://路径。若仍报404，检查build文件夹是否生成完整，或homepage配置是否错误。

4. 清除浏览器缓存 #

Safari和移动端浏览器缓存策略较严格，部署后强制清除对应网站的缓存：

• Safari：设置→Safari→清除历史记录与网站数据；
• 移动端：长按刷新按钮选择“强制刷新”。

5. 检查服务器文件权限 #

在BlueHost的CPanel文件管理器中，确保build文件夹及内部文件权限设置正确：

• 文件夹权限设为755；
• 文件权限设为644。
  权限错误会导致服务器无法读取资源，进而页面空白。

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