Laravel 应用在 Apache2 上 CSS 样式无法加载的完整解决方案-php教程-PHP中文网

Laravel 应用在 Apache2 上 CSS 样式无法加载的完整解决方案

本文详解 laravel 项目在 ubuntu + apache2 环境下静态资源（css/js）404、页面无样式的核心原因与修复方法，重点解决因 url 重写未启用导致的资源路径解析失败问题。

本文详解 laravel 项目在 ubuntu + apache2 环境下静态资源（css/js）404、页面无样式的核心原因与修复方法，重点解决因 url 重写未启用导致的资源路径解析失败问题。

在部署基于 Laravel 的第三方 CMS（如 Nexthour CMS）到 Ubuntu 服务器时，常出现“页面能访问但完全无样式”的典型现象：登录页、首页等路由可正常跳转，但浏览器控制台报错 GET http://localhost/server.php/css/app.css 404 (Not Found)；而直接访问 http://localhost/public/ 时样式正常，却无法正确路由到 /login —— 这并非代码或路径配置错误，而是 Apache2 缺失关键模块所致。

? 根本原因：Apache2 的 mod_rewrite 未启用

Laravel 依赖 Apache 的 mod_rewrite 模块实现优雅 URL（如 /login 而非 /index.php/login），并确保所有静态资源请求（/css/app.css、/js/app.js）能被正确路由至 public/ 目录下的实际文件。当该模块未启用时：

Apache 将请求视为普通路径查找，而非交由 Laravel 的 public/index.php 入口统一处理；
所有以 /css/、/js/ 开头的请求均被拒绝（返回 404），因为 Apache 默认不允许从 public/ 外部直接访问这些子目录；
server.php 是 Laravel 内置的轻量开发服务器入口（仅用于 php -S），绝不可用于生产环境，且其路由机制不兼容 Apache 的文件系统映射逻辑，故 localhost/server.php/css/xxx.css 必然 404。

⚠️ 注意：server.php 是 PHP 内置服务器的启动脚本，不是 Web 路由入口；public/index.php 才是 Laravel 在 Apache/Nginx 下的唯一合法入口。

✅ 正确部署步骤（Ubuntu + Apache2）

1. 启用 mod_rewrite

sudo a2enmod rewrite
sudo systemctl restart apache2

这是解决问题的最关键一步——a2enmod rewrite 启用重写引擎，使 .htaccess 规则生效。

2. 配置 Apache 虚拟主机（推荐方式）

编辑站点配置（如 /etc/apache2/sites-available/nexthour.conf）：

Apache Superset Dashboard and SQL Exploration Skill

Apache Superset 是一个广泛采用的开源 BI 平台，用于 SQL 探索、图表构建和仪表板交付。当代理需要查询仓库数据、组装仪表板或使用成熟的分析界面解释指标而不是临时笔记本代码时，此技能非常有用。

下载

<virtualhost>
    ServerName localhost
    DocumentRoot /var/www/nexthour/public  # 指向 public 目录，非项目根目录！

    <directory>
        AllowOverride All          # 允许 .htaccess 中的 RewriteRule
        Require all granted
    </directory>

    ErrorLog ${APACHE_LOG_DIR}/nexthour_error.log
    CustomLog ${APACHE_LOG_DIR}/nexthour_access.log combined
</virtualhost>

启用配置并重启：

sudo a2ensite nexthour.conf
sudo systemctl reload apache2

3. 验证 .htaccess 是否存在且有效

确保 public/.htaccess 文件存在（Laravel 默认已提供），内容包含标准重写规则：

<ifmodule mod_rewrite.c><ifmodule mod_negotiation.c>
        Options -MultiViews -Indexes
    </ifmodule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</ifmodule>

4. 设置正确的文件权限（可选但重要）

sudo chown -R $USER:www-data /var/www/nexthour
sudo chmod -R 775 /var/www/nexthour/storage
sudo chmod -R 775 /var/www/nexthour/bootstrap/cache

? 验证结果

完成上述操作后：

访问 http://localhost/login → 正常显示带样式的登录页；
浏览器开发者工具 Network 标签中，CSS/JS 请求状态码为 200；
public/ 目录下的 css/、js/、images/ 等资源均可直接通过 /css/app.css 等路径访问。

❗ 常见误区提醒

❌ 不要通过 http://localhost/server.php 访问生产环境 —— 它仅用于本地调试；
❌ 不要将 Apache 的 DocumentRoot 指向项目根目录（含 server.php），必须指向 public/；
❌ 不要手动修改 APP_URL 或 asset() 辅助函数生成的路径 —— 正确启用 mod_rewrite 后，Laravel 会自动适配；
✅ 使用 php artisan storage:link（如需）创建符号链接，但本问题与存储链接无关。

至此，Nexthour CMS（或其他 Laravel 应用）在 Ubuntu + Apache2 下的样式加载问题将彻底解决。核心原则始终不变：让 Apache 正确接管请求，并通过 mod_rewrite 将所有动态与静态资源请求导向 public/index.php 统一入口。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！