一、前言

最近做專案，使用的是springmvc框架，前期開發各種css，js的引用使用的是相對路徑。 先普及一些路徑的基礎知識點

二、/和./和…/的含義

“/”表示根目錄開始； “./”表示當前同級目錄開始； “…/”表示上一級目錄開始；

三、遇到的問題

例如某個html頁面中的引用：

<script src="../../js/login/login.js"></script>

這樣看視沒什麼問題。前端頁面可以單獨瀏覽，由於我們要做的是動態網站，不需要前後分離。於是，我將程式打好的名為test.war包丟在tomacat的webapps目錄下，執行時發現各種css和js404,遇到這問題。

四、問題分析

遇到這個問題，一看就是資原始檔找不到，

嘗試解決一

使用這樣引入：

<script src="/res/js/login/login.js"></script>

這樣，我在這個頁面可以引入js，不報404，因為程式會自動找到我的專案中的

http://localhost:8080/test/res/js/login/login.js

目錄，但是如果我請求了一個介面路徑變化成

http://localhost:8080/test/login/login.html

這樣我們js的載入路徑就變成：

這樣路徑就找不到了，js就404了。這樣不行

嘗試解決二

想起以前前端使用jsp頁面時，經常定義一個base，加上base就可以解決相對路徑問題。 例如：

<%   
String path = request.getContextPath();   
String basePath = request.getScheme()+"://" +request.getServerName()+":" +request.getServerPort()+path+"/" ;   
%> 

<base href="<%=basePath%>" > 

引用時候，就可以正常引用了

<script src="/res/js/login/login.js"></script>

但是現在是html，不是jsp，無法使用jsp的標籤語法和程式碼。 這種也適用

五、比較完美解決方案使用thymeleaf的標籤。

我在專案中使用了thymeleaf模板框架。整合thymeleaf就不多介紹了。 這裡主要介紹前端。 第一步：使用@{}th:src標籤將專案中的js引用換成：

<script th:src="@{/res/js/login/login.js}"></script>

第二步：使用@{}和th:href標籤將專案中的css引用換成

<link rel="stylesheet" th:href="@{/res/css/login.css}"/>

替換好以後，部署war包，訪問路徑，ok沒問題，不會404了。 換個應用名部署，訪問也沒問題。

問題解決，我個人覺得這種方案還是挺好的，分享給大家試試。