ReactJS应用部署至Apache2服务器后仅显示图标，页面内容缺失求助

1. 核对package.json的homepage配置 #

• 若部署在Apache站点根目录（如/var/www/html/），homepage设为"."即可，或者直接删除该字段（create-react-app会自动处理相对路径）
• 若部署在子目录（如/var/www/html/my-app/），homepage必须精确设为"/my-app/"，否则静态资源会找不到正确路径

2. 配置Apache2的Rewrite规则（核心解决步骤） #

单页应用的路由依赖前端处理，Apache默认不会把非文件/目录的请求转发到index.html，这会导致资源加载失败或路由失效：

1. 打开你的Apache站点配置文件（比如/etc/apache2/sites-available/your-site.conf）
2. 在对应站点的<Directory>块中添加以下规则：

<Directory /var/www/html/your-build-folder>
    Options -Indexes +FollowSymLinks
    AllowOverride All
    Require all granted

    RewriteEngine On
    # 部署在子目录时取消下面这行注释，替换成实际子路径
    # RewriteBase /your-subdirectory/
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    # 子目录部署时把/index.html改成/your-subdirectory/index.html
    RewriteRule . /index.html [L]
</Directory>

3. 启用rewrite模块：sudo a2enmod rewrite
4. 重启Apache生效：sudo systemctl restart apache2

3. 排查静态资源的权限与路径 #

• 打开浏览器开发者工具（F12），切换到Network标签刷新页面，看哪些资源报403/404：
  • 404错误：确认build产物的所有文件都已完整复制到Apache的站点目录，且homepage配置的路径和实际部署路径一致
  • 403错误：给build目录设置正确权限，让Apache用户（通常是www-data）能读取文件：

    sudo chown -R www-data:www-data /var/www/html/your-build-folder
    sudo chmod -R 755 /var/www/html/your-build-folder
    

4. 检查index.html的资源引用 #

打开build生成的index.html，确认CSS、JS等资源的引用路径是否正确：

• 根目录部署时，路径应该是相对路径（比如./static/css/main.xxxx.css）
• 子目录部署时，路径应该是绝对路径（比如/my-app/static/css/main.xxxx.css）

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