快捷導(dǎo)航

SpringBoot靜態(tài)資源CSS等修改后再運(yùn)行無(wú)效的解決

更新時(shí)間：2021年12月15日 14:53:08 作者：學(xué)而不思則忘

這篇文章主要介紹了SpringBoot靜態(tài)資源CSS等修改后再運(yùn)行無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

SpringBoot靜態(tài)資源CSS等修改后再運(yùn)行無(wú)效問(wèn)題

問(wèn)題背景

在美化網(wǎng)頁(yè)過(guò)程中，修改好CSS后在本地已經(jīng)可以顯示出我想要的效果了。于是就把修改好后的css加載到springboot中運(yùn)行，結(jié)果問(wèn)題出現(xiàn)了：我修改后的css樣式始終不能加載！打開(kāi)F12看到css樣式成功的被請(qǐng)求，然后再進(jìn)一步點(diǎn)進(jìn)去看css文件，發(fā)現(xiàn)我修改的部分并沒(méi)有加載，現(xiàn)在用的css還是我修改以前的css。這里我注意到一個(gè)細(xì)節(jié)，然后才明白是怎么回事

在這里插入圖片描述

原來(lái)spring boot會(huì)把靜態(tài)文件緩存到瀏覽器本地。但這樣就造成了一個(gè)問(wèn)題：如果服務(wù)器靜態(tài)文件修改，瀏覽器端在未過(guò)期之前是不會(huì)重新加載文件的。此時(shí)需要通過(guò)版本號(hào)來(lái)控制。spring boot版本號(hào)支持兩種，一種是文件md5，另一種是固定版本號(hào)。我采用的是md5方式，spring boot啟動(dòng)時(shí)會(huì)計(jì)算每個(gè)靜態(tài)文件的md5值并緩存，瀏覽器訪問(wèn)時(shí)每個(gè)靜態(tài)文件后綴前加上md5值作為版本號(hào)，如果服務(wù)器md5值改變則瀏覽器重新加載。（需要重啟應(yīng)用才會(huì)重新生成md5）

下面來(lái)設(shè)置md5方式

1、先設(shè)置文件配置application.properties

# 資源緩存時(shí)間，單位秒
spring.resources.cache.period=604800
# 開(kāi)啟gzip壓縮
spring.resources.chain.compressed=true
# 啟用緩存
spring.resources.chain.cache=true
# 使用MD5版本號(hào)
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

2、添加靜態(tài)資源控制類，使用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進(jìn)行版本管理
 *  并避免在版本發(fā)生改變時(shí)，由于瀏覽器緩存而產(chǎn)生資源版本未改變的錯(cuò)誤
 */
@ControllerAdvice
public class ControllerConfig {
    @Autowired
    private ResourceUrlProvider resourceUrlProvider;
    @ModelAttribute("urls")
    public ResourceUrlProvider urls() {
        return this.resourceUrlProvider;
    }
}

3、在網(wǎng)頁(yè)中引用靜態(tài)文件

注意：如果使用的thymeleaf模板引擎的話，那么需要這么進(jìn)行編寫：

<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開(kāi)發(fā)中的一些小坑—CSS失效

Springboot版本1.5.17

結(jié)合thymeleaf，在項(xiàng)目中引用CSS文件的問(wèn)題

	    <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文件后的完整路徑，打開(kāi)靜態(tài)網(wǎng)頁(yè)就是有css效果了

demo.CSS載入

沒(méi)有加載成功是這樣的

在這里插入圖片描述

但是問(wèn)題來(lái)了，還有種說(shuō)法是這樣加：

<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" >

而在靜態(tài)網(wǎng)頁(yè)中，你看到的，始終是帶上了CSS樣式的結(jié)果，但Springboot項(xiàng)目運(yùn)行起來(lái)后，你會(huì)發(fā)現(xiàn)CSS加載失效了，所以如果是Springboot項(xiàng)目，一定要加上后面的路徑th:href=""。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: