Thymeleaf 引入 JS 和 CSS 路径问题的解决思路

遇到的坑

在基于 Thymeleaf 的项目中，我们通常会把 CSS 和 JS 放在公共模板（比如 layout.html）里统一引入。但有时候你会发现，同一个页面能正常加载，换个 Controller 跳转后，样式和脚本就全挂了，提示找不到文件。

核心原因

这其实是 Thymeleaf 处理 th:href 和 th:src 时，对相对路径和绝对路径的理解差异造成的。

当你使用 @{...} 语法时：

• 以 / 开头：代表项目根目录的绝对路径。无论你在哪个 Controller 下访问，它都会从项目的根开始找。
• 不以 / 开头：代表相对于当前请求路径的相对路径。如果你的 URL 层级深了，路径就会错位。

实例对比

假设你的项目名是 admin_test。

相对路径写法

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

• 访问 http://localhost:8080/admin_test/merchant 时，最终请求的是 .../admin_test/css/bootstrap.min.css（成功）。
• 访问 http://localhost:8080/admin_test/merchant/input 时，最终请求的是 .../admin_test/merchant/css/bootstrap.min.css（失败，多了一层 merchant）。

绝对路径写法

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

• 无论访问哪个子路径，最终都指向 http://localhost:8080/admin_test/css/bootstrap.min.css。

总结建议

在公共框架文件中引入静态资源时，为了保险起见，建议统一使用以 / 开头的绝对路径。这样能避免因为 Controller 层级变化导致的资源加载错误，减少排查时间。