Spring Boot+Thymeleaf同模板不同路由JS执行异常问题求助

开发者阿泽

2026-6-21

问题原因及解决方案

核心原因

最大概率是HTML页面中JS脚本的引入路径使用了相对路径，而非Thymeleaf推荐的上下文绝对路径，导致不同路由下浏览器解析的JS资源路径错误，无法加载脚本。

举个例子：如果你的HTML里写的是

<script src="js/script.js"></script>

当访问/detalhes/sefaz时，浏览器会将JS路径解析为/detalhes/js/script.js；访问/detalhes/cndt时同样解析为/detalhes/js/script.js——但你的静态JS文件实际存放在src/main/resources/static/js/下，正确的访问路径应该是/js/script.js。之所以/detalhes/sefaz能正常运行，大概率是缓存或之前的测试残留导致的偶然现象，本质上路径是错误的。

解决方案

1. 修改HTML中的JS引入路径

使用Thymeleaf的@{}表达式生成基于应用上下文的绝对路径，确保无论当前路由是什么，都能正确定位到静态资源：
将原相对路径写法：

<script src="js/script.js"></script>

替换为：

<script th:src="@{/js/script.js}"></script>

@{/js/script.js}会自动根据应用上下文路径生成正确的绝对URL，比如应用上下文为根路径时生成/js/script.js，带上下文前缀时生成/[上下文前缀]/js/script.js，保证浏览器能正确请求到静态资源。

2. 验证静态资源配置（可选）

确认Spring Boot静态资源映射正常，默认情况下Spring Boot会自动映射src/main/resources/static/、src/main/resources/public/等目录下的静态资源。如果自定义了静态资源路径，需确保配置类的addResourceHandlers设置正确：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/js/**")
                .addResourceLocations("classpath:/static/js/");
    }
}