遇到的坑
在基于 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 层级变化导致的资源加载错误,减少排查时间。

