VSCode运行Spring Boot项目时CSS/JS资源无法加载问题

AI 小北

2026-6-17

解决Spring Boot项目CSS/JavaScript资源无法加载的问题

以下是针对该问题的排查和解决步骤：

确认静态资源目录位置
Spring Boot默认会从src/main/resources/static/目录加载静态资源，你的CSS文件必须放在src/main/resources/static/css/mycss.css，JavaScript文件同理放在static/js/下。如果把静态资源放到templates/目录下，会导致无法被识别加载。
检查Thymeleaf依赖与页面命名空间
1. 确保项目依赖中包含Thymeleaf Starter（Maven示例）：
```
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
```
1. 在HTML根标签中添加Thymeleaf命名空间，否则th:href语法不会被解析：
```
<html xmlns:th="http://www.thymeleaf.org">
```
核对资源路径拼写
注意文件名的大小写（Linux环境下大小写敏感），确认@{/css/mycss.css}中的路径和文件名与实际文件完全一致，避免因拼写错误导致404。
排查自定义静态资源配置
如果在application.properties或application.yml中自定义了静态资源路径，确保配置正确，示例：

spring.web.resources.static-locations=classpath:/static/

错误的配置会导致默认静态资源路径失效。

处理Spring Security拦截问题
如果项目使用了Spring Security，需要在配置类中放行静态资源，避免被拦截：

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers("/css/**", "/js/**").permitAll()
            .anyRequest().authenticated();
    }
}