Springboot前端thymeleaf html页面js和css相对路径引用问题解决

第一种方案:

<base th:href="@{/}">

第二种方案:

<script th:src="@{/js/myjs.js}"></script>

目录结构如下:

login.html:这里命名为login不用理会,只是测试而已,具体是为了给大家展示路径引用问题.

controller.java

springboot中,通过application启动工程,在本地访问,以访问login.html为例,

login.html链接为:http://localhost:8080/test1/login

打开F12,监控network,

network中,mycss.css引用地址为:http://localhost:8080/css/mycss.css

此时,如果将该工程打包成war包,放到tomcat下运行,那么访问地址应为:http://localhost:8080/工程名/test1/login

此时css地址仍为:http://localhost:8080/css/mycss.css,那么此时css就会报404错误,无法正确引入,这个就是引用路径问题,解决办法如下:

<!-- 如果不使用base,那么这种方式也是可以的,@{/你的文件路径},缺陷就是每次引用都必须带上th:src="@{/}"这个才能正确引用,具体用什么方式,看你们自己 -->
<script th:src="@{/js/myjs.js}"></script>

个别比较倾向于在头部添加标签,这样就不用在每个需要引入的地方都使用Thymeleaf th:href="@{/路径}"语法.