Spring Boot WebFlux中Thymeleaf引入CSS/JS报404问题求助

1. 静态资源目录与页面引用检查 #

• 确认静态资源存放位置：Spring Boot WebFlux默认加载src/main/resources/static、src/main/resources/public等目录下的静态资源，检查CSS/JS文件是否放在这些目录内（比如static/css/login.css）。
• 页面资源引用必须使用Thymeleaf的@{}语法生成绝对路径，避免相对路径解析错误：

  <link rel="stylesheet" th:href="@{/css/login.css}">
  <script th:src="@{/js/login.js}"></script>
  

  不要用../css/login.css这类相对路径，否则会因路由层级导致资源定位失败。

2. WebConfig静态资源配置验证 #

• 检查WebFlux的静态资源映射配置是否正确，确保没有路径冲突：

  @Configuration
  public class WebConfig implements WebFluxConfigurer {
      @Override
      public void addResourceHandlers(ResourceHandlerRegistry registry) {
          // 映射所有静态资源请求到static目录
          registry.addResourceHandler("/**")
                  .addResourceLocations("classpath:/static/");
      }
  }
  

• 排查是否有自定义路由拦截了静态资源路径（比如/css/**被路由处理器匹配），静态资源映射优先级低于自定义路由，需避免路由覆盖静态资源路径。

3. Thymeleaf配置正确性检查 #

• 确认Thymeleaf模板解析器配置无误，WebFlux环境需使用Reactive相关组件：

  @Configuration
  public class ThymeleafConfig {
      @Autowired
      private ApplicationContext applicationContext;
  
      @Bean
      public SpringResourceTemplateResolver templateResolver() {
          SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
          resolver.setApplicationContext(applicationContext);
          resolver.setPrefix("classpath:/templates/"); // 模板文件存放目录
          resolver.setSuffix(".html");
          resolver.setTemplateMode(TemplateMode.HTML);
          resolver.setCharacterEncoding("UTF-8");
          return resolver;
      }
  
      @Bean
      public SpringWebFluxTemplateEngine templateEngine() {
          SpringWebFluxTemplateEngine engine = new SpringWebFluxTemplateEngine();
          engine.setTemplateResolver(templateResolver());
          return engine;
      }
  
      @Bean
      public ThymeleafReactiveViewResolver viewResolver() {
          ThymeleafReactiveViewResolver resolver = new ThymeleafReactiveViewResolver();
          resolver.setTemplateEngine(templateEngine());
          resolver.setCharacterEncoding("UTF-8");
          return resolver;
      }
  }
  

• 验证依赖是否完整，Maven需包含WebFlux和Thymeleaf starter：

  <dependencies>
      <dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-webflux</artifactId>
      </dependency>
      <dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-thymeleaf</artifactId>
      </dependency>
  </dependencies>
  

4. 直接验证静态资源可访问性 #

• 启动项目后，直接在浏览器访问静态资源URL（比如http://localhost:8080/css/login.css）：
  • 若返回404：说明静态资源未被正确映射，重新检查目录结构或WebConfig配置。
  • 若能正常访问：说明页面中的资源引用路径错误，修正为@{}语法的正确路径。

5. 缓存与打包排查 #

• 用浏览器无痕模式访问，避免缓存旧的错误路径。
• 若为打包部署，检查jar包内是否包含BOOT-INF/classes/static目录及对应资源，确认构建工具（Maven/Gradle）未遗漏静态资源复制。

内容的提问来源于stack exchange，提问作者user18501010