編碼的世界 / 優質文選 / 生涯

Spring Boot無法訪問css，js等靜態資源的問題

2022年3月24日
-

前言
在intellij IDEA中編寫了一個Spring Boot項目，運行時發現外鏈的css樣式無法載入進頁面，但是按住Ctrl又能點進css文件，這證明編輯器是能識別到這個css文件的。那麼瀏覽器中的網頁沒有css樣式的原因就在於spring boot對靜態資源的訪問方式了。網上有很多方法，但大多比較複雜，不適合我們這種基礎程序員，因此我挑了一個比較實用和推薦的方法進行簡化講解，希望能幫到大家。如有錯誤，還請大神指出。
原理
spring boot框架裏面包括了很多spring框架大家族的默認配置文件，其中的springmvc配置文件中有對靜態資源的限制和攔截。如果靜態文件沒有放在框架默認的或者自己之後手動添加的掃描路徑下，那麼框架是會對這些靜態資源進行攔截從而導致頁面找不到相關的資源
解決方法
規範項目結構
使用官方默認的掃描路徑。畢竟框架的好處就是嚴格按照要求搭好之後幾乎所有的操作都會變得簡單，一句話概括就是一勞永逸 spring boot對靜態資源的默認掃描路徑是：

classpath:/static




classpath:/public
classpath:/resources
classpath:/META-INF/resources

那麼我們直接將靜態資源放入下列路徑即可（以static為例）

在test.html代碼中的地址為

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<img src="timg.jpg"/>
</body>
</html>

thymeleaf代碼中的地址為

<img th:src="@{/timg.jpg}"/>

配置自定義映射路徑
上面的方法的確是可行的，但是對於一個有強迫症的程序員來說，把css，js還有圖片等文件放在一起可是會要了命的，大部分人的編程習慣是自己新建文件夾然後依次歸類，比如這樣

這個時候如果還是按照默認配置來，就會出現404的情況。

<img src="images/timg.jpg"/>

原因是因為默認路徑雖然是在static下，但並沒有包含static 下的各個文件夾，因此當我們把靜態文件移入這些文件夾後，spring boot就不認識了。因此，為了讓spring boot認識，我們需要添加一個配置類來把我們自己的路徑添加進去，具體代碼如下

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class MyConfig extends WebMvcConfigurerAdapter{
 @Override
 public void addResourceHandlers(ResourceHandlerRegistry registry) {
 registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
 }
}

較簡單的方法
網上有一個簡單的方法就是對spring-boot的配置文件application.properties文件直接進行修改。不過我個人不太推薦那些方法，重寫後會破壞springboot本身的一些配置(雖然一般破壞之後反而更加方便規範了)。所以我們就盡量少用配置文件而改用java代碼進行修改。 /static/** 的意思是將static下的所有文件夾及相關子文件夾都添加進掃描路徑，那麼修改之後重啟項目就可以對static下的靜態資源進行分類而且訪問的時候不會出現404了。修改的方法就是打開application.properties配置文件，在裏面加一行spring.mvc.static-path-pattern=/static/**即可。
參考資料
http://blog.csdn.net/isea533/article/details/50412212 http://www.cnblogs.com/magicalSam/p/7189476.html

編碼的世界 / 優質文選 / 生涯

Spring Boot無法訪問css，js等靜態資源的問題

熱門文章