Spring Boot 不加载静态文件（CSS 和 JS）答案

【问题标题】：Spring Boot not loading static files (CSS and JS)Spring Boot 不加载静态文件（CSS 和 JS）
【发布时间】：2021-01-11 17:04:51
【问题描述】：

所以我开始了一个spring boot项目。 HTML 加载良好，但是，thyme-leaf 似乎无法加载静态文件。这两个文件位于 static.css 和 static.js 等包中。我在加载这两个文件时收到 ERR_ABORTED:404 错误，但不知道原因。

我已经尝试将路径（如其他类似问题中所建议的那样）更改为 @{css/styles.css} 而不是 @{/css/styles.css} 但这不起作用。

有人知道我是否在这里遗漏了什么吗？

以下是 HTML 文件：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bg-img">
    <div class="content">
        <header>Login Form</header>
        <form action="#">
            <div class="field">
                <span class="fa fa-user"></span>
                <input type="text" required placeholder="Email or Phone">
            </div>
            <div class="field space">
                <span class="fa fa-lock"></span>
                <input type="password" class="pass-key" required placeholder="Password">
                <span class="show">SHOW</span>
            </div>
            <div class="pass">
                <a href="#">Forgot Password?</a>
            </div>
            <div class="field">
                <input type="submit" value="LOGIN">
            </div>
        </form>
        <div class="login">Or login with</div>
        <div class="links">
            <div class="facebook">
                <i class="fab fa-facebook-f"><span>Facebook</span></i>
            </div>
            <div class="instagram">
                <i class="fab fa-instagram"><span>Instagram</span></i>
            </div>
        </div>
        <div class="signup">Don't have account?
            <a href="#">Signup Now</a>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/loginscript.js}"></script>
</body>

【问题讨论】：

需要查看项目结构，尤其是resources文件夹。

标签： spring spring-boot spring-mvc thymeleaf

【解决方案1】：

你的 css 文件夹在哪里？

css，js应该在静态文件夹中

src
   main
       java
       resources
                static
                      css
                      i18n
                      img
                      js
                templates

【讨论】：

是的，我的项目就是这样的结构！

【解决方案2】：

在你的 head 标签中添加这个：

<link rel="stylesheet" href="../static/css/styles.css" type="text/css" th:href="@{/styles.css}">

注意：上面的代码只有在styles.css 出现在下面的路径中时才有效：

|--resources
    |--static
        |--css
            |--styles.css

【讨论】：

【解决方案3】：

这是给任何发现这个的人，结果是 th:href 属性，我必须将完整路径作为 th:href="@{../静态/css/styles.css}”。感谢所有回答的人！

【讨论】：