Plesk部署React应用配置.htaccess修复刷新404后出现空白页求助

第一步：确认静态资源引用路径配置 #

• 首先检查React项目package.json里的homepage字段是否配置正确
  • 若部署在域名根目录，homepage值设为"."或者站点完整域名即可
  • 若部署在子目录，需要填写对应子目录路径，比如"/sub-app"
• 检查构建产物中index.html里的静态资源（js、css）引用路径是否以相对路径开头，避免绝对路径配置错误导致重写后资源加载失败

第二步：修正.htaccess重写规则 #

当前的规则在Plesk的Apache环境下容易出现路径匹配问题，替换为以下规则即可：

<IfModule mod_rewrite.c>
  RewriteEngine On
  # 静态资源直接返回
  RewriteCond %{REQUEST_URI} \.(.*)$
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteRule ^(.*)$ $1 [L]

  # 其余请求全部走index.html
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ /index.html [L]
</IfModule>

• 如果应用部署在子目录，需要把最后一行的/index.html改为/你的子目录名/index.html

第三步：确认Plesk站点配置 #

• 登录Plesk面板，进入对应站点的「Apache与Nginx设置」
• 确认「重写模式（mod_rewrite）」处于开启状态
• 如果你开启了Nginx代理静态资源，需要在「Nginx额外配置」中添加以下规则：

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

• 保存配置后等待2分钟生效，再清空浏览器缓存访问站点测试

第四步：React Router配置校验 #

• 确认你使用的是BrowserRouter而不是HashRouter
• 如果是多路由场景，确认根路由配置没有加exact之外的冗余限制

内容的提问来源于stack exchange，提问作者Le Pere Aymar