SpringBoot应用中.js文件加载失败问题求助

一、正确的项目文件结构 #

SpringBoot遵循约定大于配置的原则，静态资源和模板文件的标准目录结构如下：

src/main/resources/
├── templates/          # 存放HTML模板文件（如Thymeleaf模板）
│   └── register.html   # 你的注册表单HTML
└── static/             # 存放静态资源（JS、CSS、图片等）
    └── app.js          # 你的下拉列表渲染JS文件

二、HTML中JS文件的正确引入方式 #

在register.html中引入app.js时，必须使用根路径开头的绝对路径——SpringBoot会将static目录作为静态资源的根路径，直接通过/app.js即可访问到该文件：

<!-- 正确写法 -->
<script src="/app.js"></script>

<!-- 错误写法：相对路径会导致请求路径错误 -->
<!-- <script src="app.js"></script> -->
<!-- <script src="../static/app.js"></script> -->

三、必要的依赖与配置检查 #

1. pom.xml依赖配置 #

确保项目依赖中包含Web和Thymeleaf（这是templates目录生效的前提）：

<dependencies>
    <!-- SpringBoot Web核心依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Thymeleaf模板引擎依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

2. application.properties配置 #

默认情况下无需额外配置，SpringBoot已内置以下默认规则（可省略不写）：

# Thymeleaf模板默认前缀和后缀
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

# 静态资源默认扫描路径
spring.web.resources.static-locations=classpath:/static/,classpath:/public/,classpath:/resources/,classpath:/META-INF/resources/

3. 控制器配置 #

确保控制器正确返回模板视图，而非字符串或JSON：

@Controller
public class RegisterController {
    @GetMapping("/register")
    public String showRegisterForm() {
        // 返回模板名称，对应templates/register.html
        return "register";
    }
}

四、常见问题排查 #

• 检查app.js文件名拼写（注意大小写）是否与引入路径一致
• 确认控制器映射的URL与HTML访问路径匹配，避免相对路径混乱
• 清理浏览器缓存后重新测试，避免缓存导致的资源加载异常

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