Spring Boot 接入 HTML 找不到 JS 文件的解决方案
在使用 Spring Boot 开发 Web 应用时，开发者常常会遇到一些问题，最常见的之一便是 HTML 页面无法加载 JS 文件。本文将为您详细介绍这一问题的产生原因，并提供相应的解决方案。此外，我们还将通过代码示例和图示来帮助您理解。
一、问题描述
在 Spring Boot 应用中，通常我们会将静态文件（如 HTML、CSS 和 JS 文件）放置于 src/main/resources/static 或 src/main/resources/public 目录中。然而，有时在访问 HTML 页面时，JS 文件会显示无法被加载，这时浏览器的开发者工具通常会显示类似于 404 Not Found 的错误信息。
1.1 错误示例
假设我们的项目结构如下：
src
└── main
└── resources
├── static
│ ├── js
│ │ └── app.js
│ └── index.html
└── application.properties
在 index.html 文件中引入 JS 文件的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spring Boot Example</title>
<script src="js/app.js"></script>
</head>
<body>
Hello, Spring Boot!
</body>
</html>
当我们启动 Spring Boot 应用并访问 http://localhost:8080/index.html 时，可能会发现浏览器的控制台显示 404 错误，表示 app.js 文件未能找到。
二、产生原因
2.1 相对路径问题
以上错误通常是因为相对路径不正确导致的。在 HTML 文件中引入资源时，如果使用相对路径，路径将基于当前文档的位置进行解析。只有在根目录下才能正确访问到 static/js/app.js 文件。
2.2 Maven 配置问题
有时，配置问题也会导致静态资源无法找到。需要仔细检查 pom.xml 是否正确配置。
三、解决方案
3.1 使用绝对路径
一种常见的解决方案是使用绝对路径。修改 index.html 中的 JS 引入路径如下：
<script src="/js/app.js"></script>
这种方式确保了无论当前页面在哪里，都能正确访问到 static 目录下的资源。
3.2 配置 Spring Boot
Spring Boot 默认会扫描 static 和 public 目录，确保它们能够正常工作。不过，我们可以在 application.properties 中添加配置，以确保静态资源的访问没有问题：
spring.web.resources.static-locations=classpath:/static/
3.3 Maven 资源插件配置
确保在 pom.xml 中添加了以下资源配置，确保 Maven 能正确帮助我们处理静态资源：
<build>
<resources>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>static/**</include>
</includes>
</resource>
</resources>
</build>
四、代码示例
以下是完整的 index.html 文件内容与 Java 控制器示例代码：
4.1 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spring Boot Example</title>
<script src="/js/app.js"></script>
</head>
<body>
Hello, Spring Boot!
<script>
// 这里可以测试 JS 是否加载成功
console.log("JS Loaded Successfully");
</script>
</body>
</html>
4.2 控制器示例
创建一个简单的控制器来返回 HTML 页面：
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/index.html")
public String index() {
return "index";
}
}
五、图示说明
5.1 旅行图
以下是一个简单的旅行图，展示用户访问页面的旅程：
journey
title 用户访问 Spring Boot 应用的旅程
section 访问应用
用户打开浏览器: 5: 用户
输入 URL: 5: 用户
发送请求: 4: 用户
section 加载页面
接收响应: 5: Spring Boot
渲染 HTML: 4: 浏览器
section 加载静态资源
请求 JS 文件: 4: 浏览器
返回 JS 响应: 4: Spring Boot
5.2 关系图
接下来是一个简单的 ER 图，展示控制器与 HTML 的关系：
erDiagram
CONTROLLER {
string id
string name
}
HTML {
string id
string title
}
CONTROLLER ||--|| HTML : returns
结尾
本文介绍了 Spring Boot 中接入 HTML 时 JS 文件找不到的常见原因及解决方案。通过使用绝对路径解决资源加载失败的问题，配合正确的 Maven 配置，可以有效避免此类问题的出现。希望本文的分析和示例代码能帮助您更好地理解 Spring Boot 项目中的静态资源管理。如果您在开发中遇到其他问题，欢迎在评论区留言讨论！
