SpringBoot靜態資源CSS等修改後再運行無效的解決

Posted on by

SpringBoot靜態資源CSS等修改後再運行無效問題

問題背景

在美化網頁過程中，修改好CSS後在本地已經可以顯示出我想要的效果瞭。於是就把修改好後的css加載到springboot中運行，結果問題出現瞭：我修改後的css樣式始終不能加載！打開F12看到css樣式成功的被請求，然後再進一步點進去看css文件，發現我修改的部分並沒有加載，現在用的css還是我修改以前的css。這裡我註意到一個細節，然後才明白是怎麼回事

在這裡插入圖片描述

原來spring boot會把靜態文件緩存到瀏覽器本地。但這樣就造成瞭一個問題：如果服務器靜態文件修改，瀏覽器端在未過期之前是不會重新加載文件的。此時需要通過版本號來控制。spring boot版本號支持兩種，一種是文件md5，另一種是固定版本號。我采用的是md5方式，spring boot啟動時會計算每個靜態文件的md5值並緩存，瀏覽器訪問時每個靜態文件後綴前加上md5值作為版本號，如果服務器md5值改變則瀏覽器重新加載。（需要重啟應用才會重新生成md5）

下面來設置md5方式

1、先設置文件配置application.properties

# 資源緩存時間，單位秒
spring.resources.cache.period=604800
# 開啟gzip壓縮
spring.resources.chain.compressed=true
# 啟用緩存
spring.resources.chain.cache=true
# 使用MD5版本號
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

2、添加靜態資源控制類，使用ResourceUrlProvider

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.servlet.resource.ResourceUrlProvider;

/**
 *  使用ResourceUrlProvider進行版本管理
 *  並避免在版本發生改變時，由於瀏覽器緩存而產生資源版本未改變的錯誤
 */
@ControllerAdvice
public class ControllerConfig {

    @Autowired
    private ResourceUrlProvider resourceUrlProvider;

    @ModelAttribute("urls")
    public ResourceUrlProvider urls() {
        return this.resourceUrlProvider;
    }

}

3、在網頁中引用靜態文件

註意：如果使用的thymeleaf模板引擎的話，那麼需要這麼進行編寫：

<link rel="stylesheet" th:href="${urls.getForLookupPath('/css/font.css')}" rel="external nofollow" >
<link rel="stylesheet" th:href="${urls.getForLookupPath('/css/xadmin.css')}" rel="external nofollow" >
<script th:src="${urls.getForLookupPath('/lib/layui/layui.js')}" charset="utf-8"></script>
<script type="text/javascript" th:src="${urls.getForLookupPath('/js/xadmin.js')}"></script>

SpringBoot開發中的一些小坑—CSS失效

Springboot版本1.5.17

結合thymeleaf，在項目中引用CSS文件的問題

	    <parent>
	        <groupId>org.springframework.boot</groupId>
	        <artifactId>spring-boot-starter-parent</artifactId>
	        <version>1.5.17.RELEASE</version>
	        <relativePath/> <!-- lookup parent from repository -->
	    </parent>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

<!DOCTYPE html >
<html  lang="zh-CN" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8" />
    <title>0.0</title>
    <link  rel="stylesheet" type="text/css"  href="../static/css/index.css" rel="external nofollow"  rel="external nofollow" >
</head>

首先配置的CSS引用是這樣，href後面跟上從static文件後的完整路徑，打開靜態網頁就是有css效果瞭

demo.CSS載入

沒有加載成功是這樣的

在這裡插入圖片描述

但是問題來瞭，還有種說法是這樣加：

<link  rel="stylesheet" type="text/css"  href="../static/css/index.css" rel="external nofollow"  rel="external nofollow"  th:href="@{/css/index.css}" rel="external nofollow" >

而在靜態網頁中，你看到的，始終是帶上瞭CSS樣式的結果，但Springboot項目運行起來後，你會發現CSS加載失效瞭，所以如果是Springboot項目，一定要加上後面的路徑th:href=””。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：