Ubuntu Apache部署Laravel 9.48后CSS/JS无法加载求助

环境与现象 #

• 运行环境：Ubuntu 20.04，Apache 2.4，Laravel 9.48
• 核心问题：浏览器无法加载CSS、JS及图片等静态资源，多浏览器、多设备访问均出现相同问题
• 验证情况：Apache运行正常，PHP配置通过phpMyAdmin验证无误；同服务器上非Laravel开发的HTML站点可正常加载静态资源
• 前置操作：曾因旧vendor目录导致php artisan serve命令报错，执行composer update更新vendor后该命令可正常运行，但静态资源加载问题未解决
• 日志信息：Laravel无报错记录；Apache访问日志仅记录DebugBar相关资源404；浏览器控制台显示大量net::ERR_CONNECTION_REFUSED及404错误

浏览器控制台错误 #

all.min.css:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
line-awesome.min.css:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
bootstrap.min.css:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
lightcase.css:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
animate.min.css:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
nice-select.css:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
slick.css:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
main.css:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
bootstrap-fileinput.css:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
custom.css:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
color.php:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
stylesheets:1          Failed to load resource: the server responded with a status of 404 (Not Found)
javascript:1          Failed to load resource: the server responded with a status of 404 (Not Found)
(index):56 Uncaught ReferenceError: jQuery is not defined
    at (index):56:352
jquery-3.6.0.min.js:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
bootstrap.bundle.min.js:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
lightcase.js:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
iziToast.min.css:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
logo.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
preloader-dice.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
6107c19dcf99a1627898269.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
61051300dc8531627722496.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
610515f76a27a1627723255.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
61051d8469d731627725188.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
61051a9ed28511627724446.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
61051cb37ad601627724979.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
610521608fde21627726176.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
61052482a60ed1627726978.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
610526fa315241627727610.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
61016a7a845b11627482746.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
61016c330425b1627483187.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
61016c29c44201627483177.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
61016c22d7e091627483170.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
61016c12de0c21627483154.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
6104f58044ec81627714944.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
6104f5888e32a1627714952.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
6104f58f7a1d71627714959.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
6104edb2e1eef1627712946.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
6104edad157401627712941.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
6104ed99708221627712921.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
5fa3a247df8c71604559431.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
5fa3a23fe1ad11604559423.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
5fa3a237c36d91604559415.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
5fa3a22faadaa1604559407.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
5fa3a228cc9f01604559400.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
5fa3a22252e7e1604559394.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
5fa3a21c3bc101604559388.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
5fa3a216a0be21604559382.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
6107bff04a0da1627897840.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
6107c3e6ac8fa1627898854.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
6107c4624ae9f1627898978.jpg:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
jquery.nice-select.min.js:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
slick.min.js:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
wow.min.js:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
app.js:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
iziToast.min.js:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
(index):1139 Uncaught ReferenceError: jQuery is not defined
    at (index):1139:8
(index):1144 Uncaught ReferenceError: PhpDebugBar is not defined
    at (index):1144:19
/assets/images/logoIcon/favicon.png:1          Failed to load resource: net::ERR_CONNECTION_REFUSED
stylesheets:1          Failed to load resource: the server responded with a status of 404 (Not Found)

Apache访问日志错误 #

127.0.0.1 - - [26/Jan/2023:20:51:21 +0800] "GET /_debugbar/assets/javascript?v=1674737026 HTTP/1.1" 404 488 "http://localhost/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/109.0"
127.0.0.1 - - [26/Jan/2023:20:51:21 +0800] "GET /_debugbar/assets/stylesheets?v=1674737026&theme=auto HTTP/1.1" 404 487 "http://localhost/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/109.0"

排查与解决方案 #

1. 修正静态资源URL生成方式 #

• 确保模板中使用Laravel官方辅助函数生成静态资源URL，避免硬编码：

  <!-- 正确写法 -->
  <link rel="stylesheet" href="{{ asset('css/main.css') }}">
  <script src="{{ asset('js/app.js') }}"></script>
  
  <!-- 错误写法（需避免） -->
  <link rel="stylesheet" href="/css/main.css">
  

• 检查.env文件中APP_URL配置是否与实际访问域名一致：

  APP_URL=http://你的服务器域名或IP
  

• 执行命令清除配置缓存：

  php artisan config:clear
  

2. 修复public目录权限 #

Laravel静态资源存放在public目录，需确保Apache拥有读取权限：

sudo chown -R www-data:www-data /你的Laravel项目路径/public
sudo chmod -R 755 /你的Laravel项目路径/public

3. 配置Apache虚拟主机与rewrite规则 #

• 启用Apache rewrite模块：

  sudo a2enmod rewrite
  sudo systemctl restart apache2
  

• 创建或修改虚拟主机配置文件（如/etc/apache2/sites-available/laravel.conf）：

  <VirtualHost *:80>
      ServerName 你的服务器域名
      DocumentRoot /你的Laravel项目路径/public
  
      <Directory /你的Laravel项目路径/public>
          Options Indexes FollowSymLinks MultiViews
          AllowOverride All
          Require all granted
      </Directory>
  
      ErrorLog ${APACHE_LOG_DIR}/laravel-error.log
      CustomLog ${APACHE_LOG_DIR}/laravel-access.log combined
  </VirtualHost>
  

• 启用虚拟主机并重启Apache：

  sudo a2ensite laravel.conf
  sudo systemctl restart apache2
  

4. 处理DebugBar资源404问题 #

如果启用了Laravel DebugBar，执行以下命令发布资源：

php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"

或者临时关闭DebugBar（修改.env）：

DEBUGBAR_ENABLED=false

5. 编译Laravel Mix资源（若使用） #

如果项目用Laravel Mix管理前端资源，执行编译命令：

npm install
npm run dev # 开发环境
# 或生产环境用
npm run prod

并使用mix()函数加载资源：

<link rel="stylesheet" href="{{ mix('css/main.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

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