thymeleaf 和 maven web 项目无法识别 css 文件

问题描述

我正在尝试将 css 文件链接到一个 html 文件，就像他们在下一个教程 https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html 中所做的那样，但是当我在 tomcat 中运行该应用程序时，HTML 可以工作，但缺少 CSS，我收到下一个错误浏览器控制台“加载资源失败：服务器响应状态为 404 ()”，与此相反，如果我在没有 tomcat 的情况下打开 html，css 文件工作正常，所以我正确地指向该文件。如果有帮助，我已经使用 maven-archetype-webapp 创建了项目

这是我的项目结构

我想链接 css 文件的 HTML

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Web de productos - Inicias sesion</title>
    <link rel="stylesheet" type="text/css" media="all"
         href="../../css/normalize.css" th:href="@{/css/normalize.css}" />  
    <link rel="stylesheet" type="text/css" media="all"
        href="../../css/index.css" th:href="@{/css/index.css}" />   
</head>
<body> ... </body>
</html>

pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>ss.webdeproductos</groupId>
  <artifactId>WebDeProductos2</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>WebDeProductos2 Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
        
    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>3.1.0</version>
        <scope>provided</scope>       
    </dependency>
    
    <dependency>
        <groupId>org.hibernate</groupId>
        <artifactId>hibernate-core</artifactId>
        <version>5.3.6.Final</version>
    </dependency>
    
    <!-- https://mvnrepository.com/artifact/MysqL/mysql-connector-java -->
    <dependency>
        <groupId>MysqL</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.21</version>
    </dependency>
    
    <!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf</artifactId>
        <version>3.0.11.RELEASE</version>
    </dependency>
    
  </dependencies>

  <build>
    <finalName>WebDeProductos2</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

你知道如何解决这个问题吗？

解决方法

在您的 thymeleaf 模板中有 href 的双重定义，请参阅 href="../../css/normalize.css" th:href="@{/css/normalize.css}"。您应该删除其中之一 - 在浏览器中检查您的 html 源，路径可能与您的文件夹结构不匹配。

Thymeleaf 有一个不同的基本位置来检查静态文件，如 css（或 js）。
由于您以这种方式引用 css 文件 th:href="@{/css/normalize.css}" 试试这个文件夹结构：

WEB-INF/静态
WEB-INF/静态/css
WEB-INF/static/js
WEB-INF/模板

在我的德语博客中，我写了一篇关于 Spring Boot 和 Thymeleaf 的文章：
https://agile-coding.blogspot.com/2020/10/spring-mvc-thymeleaf.html

我的包含文件夹结构的示例代码可以在这里找到：
https://github.com/elmar-brauch/thymeleaf

java java java-ee-7 maven maven thymeleaf tomcat9

thymeleaf 和 maven web 项目无法识别 css 文件

问题描述

解决方法

相关问答