SpringBoot2.x｜Thymeleaf页面不能正常载入css、js文件

最新推荐文章于 2025-11-18 06:00:00 发布

原创最新推荐文章于 2025-11-18 06:00:00 发布 · 8.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#themeleaf #css #js

SpringBoot 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在前端项目中正确配置静态资源的加载路径，包括HTML、CSS和JS文件的引入方式，并提供了一种通过实现WebMvcConfig配置类来确保资源能够被正确加载的方法。

Html
css及js文件引入最好采用绝对路径。

<!-- reset, layui and login -->
<link rel="stylesheet" th:href="@{~/static/css/reset.css}"/>
<link rel="stylesheet" th:href="@{~/static/layui/css/layui.css}"/>
<link rel="stylesheet" th:href="@{~/static/css/login/login.css}"/>

application.properties

spring.mvc.static-path-pattern=/static/**

在使用thymeleaf的layout布局时，css和js文件都放入主页中，引用的各个模块页面不需要添加css、js文件。

如果上面的配置都没用的话，需要实现WebMvcConfig配置类。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }
}