Laravel 5.0 前端資源引入指南：CSS、JavaScript 與圖片的正確路徑

核心原則：所有前端資源放在 public/ 目錄

public/
  css/
    app.css
  js/
    app.js
  images/
    logo.png

Blade 模板中引入方式

<!-- CSS -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">

<!-- JavaScript -->
<script src="{{ asset('js/app.js') }}"></script>

<!-- 圖片 -->
<img src="{{ asset('images/logo.png') }}" alt="Logo">

asset() 輔助函式會自動生成正確的完整 URL（含子目錄部署時的前綴）。

進階：使用 Laravel Elixir / Mix 進行版本控制與壓縮

<!-- 自動附加雜湊版本號，防快取 -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

需安裝 Node.js、執行 npm install、配置 webpack.mix.js 並執行 npm run dev/production。

常見錯誤

• 資源放在 resources/ 而非 public/，導致 404。
• 直接寫死 /css/app.css，部署到子目錄時失效。
• 忘記執行 php artisan vendor:publish 發布第三方套件資源。