Eclipse Web 專案目錄分層後 CSS/JS 路徑失效：相對路徑陷阱與絕對路徑解決方案

現象：將 HTML/JSP 分類放入子目錄 (如 GeneralUI/)，CSS 路徑寫相對路徑 css1/... 或 ../css1/...，初始頁面正常，跳轉後樣式丟失。

根本原因：相對路徑基準是「瀏覽器地址欄 URL」，而非文件物理位置

• 初始訪問 /GeneralUI/index.jsp，相對路徑 css1/... 解析為 /GeneralUI/css1/... → 正常。
• 跳轉至 /OtherModule/page.jsp，同樣相對路徑解析為 /OtherModule/css1/... → 404。

解決方案：使用 Web 絕對路徑 (上下文路徑開頭)

JSP 中 (推薦)：

<link rel="stylesheet" href="${pageContext.request.contextPath}/css1/css/bootstrap.css">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>

• ${pageContext.request.contextPath} 動態獲取部署上下文路徑 (如 /myapp)，部署至不同虛擬目錄自動適配。
• 路徑以 / 開頭，表示站點根目錄下絕對路徑，與當前頁面 URL 無關。

HTML 靜態頁面中：

1. 改用 JSP (如 index.jsp) 利用上述 EL 表達式。
2. 或 JS 動態注入 <base href="${pageContext.request.contextPath}/"> (需 JSP 渲染)。
3. 或構建工具 (Maven/Gulp/Webpack) 打包時自動替換路徑佔位符。

目錄結構建議

WebContent/
├── css/           # 統一樣式目錄
├── js/            # 統一腳本目錄
├── images/
├── GeneralUI/     # 模塊頁面
│   ├── index.jsp
│   └── ...
└── OtherModule/
    └── ...

**核心原則：前端資源引用永遠使用上下文路徑絕對路徑，拒絕相對路徑。**