CodeIgniter 框架載入 CSS 與 JS 失敗的解決方案

在將靜態 HTML 頁面整合進 CodeIgniter (CI) 框架時，開發者常會遇到 CSS、JavaScript 等靜態資源無法正常載入的問題。這主要是因為 CI 採用單一入口機制，所有請求都必須經由 index.php 統一分發處理，導致相對路徑失效。

問題根源分析

CI 框架的核心特性是「單一入口」，所有 HTTP 請求皆導向 index.php。當瀏覽器解析 HTML 中的 <link> 或 <script> 標籤時，若使用相對路徑（如 resource/style.css），瀏覽器會以當前 URL 為基準發起請求，但這些請求實際上會被 CI 的路由機制攔截，導致找不到實體檔案而回傳 404 錯誤。

解決方案一：使用 base_url() 輔助函數

在 application/config/config.php 中正確設定 $config['base_url']（例如 https://localhost:8080/project_name/），並在視圖檔案中輸出完整路徑：

<script src="<?php echo base_url(); ?>resource/aaa.js"></script>
<link rel="stylesheet" href="<?php echo base_url(); ?>resource/style.css">

此方式明確指定資源的絕對路徑，繞過路由機制直接存取 public 或 application/resource 目錄下的靜態檔案。

解決方案二：善用 HTML <base> 標籤

在 HTML <head> 區塊加入 <base> 標籤，設定頁面所有相對連結的基準 URL：

<head>
  <base href="<?php echo base_url(); ?>" />
  <script src="resource/aaa.js"></script>
  <link rel="stylesheet" href="resource/style.css">
</head>

此法優點在於視圖檔案內部連結維持簡潔相對路徑，僅需在版面模板統一設定一次基準路徑，適合大型專案維護。

最佳實踐建議

• 將 CSS、JS、圖片等靜態資源置於專案根目錄下的 assets/ 或 public/ 資料夾，而非 application/ 內部
• 確認 config.php 中 base_url 結尾包含斜線 /
• 若使用 Apache，啟用 mod_rewrite 並配合 .htaccess 隱藏 index.php，美化 URL 同時避免路徑誤判

掌握 CI 的單一入口特性與路徑解析機制，靜態資源載入問題即可迎刃而解。