Web項目【樣式加載失敗】原因
記得以前發布項目的時候遇到過這個問題，忘了當時怎么搗鼓好的。近期又遇到這個問題，花了很久才解決，記錄下來，希望可以幫到更多的人。
常見的樣式文件有有css、js，加載不出來主要有三方面的原因：
1.瀏覽器兼容性
瀏覽器內核可以分成兩部分：
- 渲染引擎。負責取得網頁的內容（HTML、XML、css圖像等）
- JS 引擎。負責加載JavaScript腳本
當前主流的瀏覽器內核：
- IE內核。微軟自帶的瀏覽器使用的就是這種內核。
- Chrome內核。谷歌瀏覽器使用的內核，搜狗、QQ等瀏覽器都是在Chrome內核基礎上開發的。
為了達到更好的用戶體驗，大部分瀏覽器都換用了Chrome內核，一些前端框架（如Bootstrap）也推薦使用Chrome內核的瀏覽器進行解析。
實際開發的時候，盡可能使用高版本的IE或Chrome瀏覽器，並使用HTML5格式，才能看到完整的渲染效果。
2.路徑錯誤
web項目中的路徑分為兩種：
- 絕對路徑。以磁盤根目錄為根結點，如windows的
C:\,Linux的/etc - 相對路徑。以項目路徑為根節點，如
/css/index.css，/js
歸根結底，不管哪種路徑，本質上都是絕對路徑。所有的相對路徑都是系統或API在底層幫助我們構建了絕對路徑，從而找到資源
開始排查錯誤和解決：
- 介紹一個小工具，谷歌瀏覽器自帶的
開發者工具，你可以使用Ctrl+Shift+i或者右鍵檢查調出它，如圖：
- 我們點擊
Sources，刷新一下網頁：
可以看到，我們的樣式表確實是請求到了，如果為空的話，那就是路徑出問題了。
- 查看一下你的jsp/html代碼，如果是這種：
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
使用了網絡url，一般不會出現問題，你可以在瀏覽器直接訪問源文件驗證鏈接是否有效
- 如果類似這種：
<link href="style/bootstrap.min.css" rel="stylesheet">
就是使用相對路徑，style文件夾應該和你的jsp/html文件在同一目錄下
- 一般服務器會自動轉換為對應的絕對路徑，如果沒有，可以使用以下這種：
<link href="<%=request.getContextPath() %>style/bootstrap.min.css" rel="stylesheet">
也可以用EL表達式：
<link href="${pageContext.request.contextPath}/style/bootstrap.min.css" rel="stylesheet">
或者直接來個絕對路徑：
<%
String path = request.getContextPath();
String basePath = request.getServerName() + ":" + request.getServerPort() + path + "/";
String baseUrlPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<link href="<%=baseUrlPath%>style/bootstrap.min.css" rel="stylesheet">
3.響應的Content-Type錯誤
點擊開發者工具的Network，刷新頁面，點擊樣式文件：
可以看到狀態碼是200響應正常
css正常的Content-Type應該如圖為text/css類型，如果是text/html類型是加載不出樣式的
看看你自己的項目是不是使用了過濾器
把圈出來的那行刪去或者跳轉下過濾器映射目錄
刪去后仍加載不出來，請把你的項目clear重新編譯，瀏覽器緩存清空並重啟
轉載請注明博文來源，有什么問題歡迎在評論欄留言。 ——Kevin_Lu 2020/3/23