目录
问题描述
IDEA里Springboot+thymeleaf项目无法找到外部js和css的问题
问题分析
我们之前在html中的引入方式都是像下面这样：
<link rel="stylesheet" href="plugin/css/bootstrap.3.3.7.css" type="text/css">
<script src="plugin/js/bootstrap3.3.7.min.js" type="text/javascript"></script>但是现在使用了springboot+thymeleaf，方式自然不同。
1、在IDEA下的springboot项目中，页面一般放置于templates目录下，而js和css文件一般放置于static目录下，因此想从页面寻找js和css文件首先要向上返回一级目录才能开始向下去找文件。
2、thymeleaf的一个宣传点就是实现了前后端的分离开发，听起来很不错，但是导致了一个新的问题就是，运用上面那种方式是可以引用到js和css，但仅限于静态页面开发，当部署到tomcat上时，js和css则不能被加载。提示信息为找不到相关css和js文件。因此，如果想在服务器上运行时，就要用thymeleaf的方式再添加一遍js和css文件。
(这里仅仅提出问题分析，并不表示贬低thymeleaf。不喜勿喷。)
问题解决
-
头文件引入相关标签
<html lang="en" xmlns:th="http://www.thymeleaf.org">-
文件引入时使用两种方式同时引入文件
<!-- 引入css文件 -->
<link rel="stylesheet"
th:href="@{/plugin/css/bootstrap.3.3.7.css}" href="../static/plugin/css/bootstrap.3.3.7.css"
type="text/css">
<!-- 引入js文件 -->
<script
th:src="@{/plugin/js/bootstrap-table.js}"
src="../static/plugin/js/bootstrap-table.js"
type="text/javascript">
</script>
①使用形如：【th:href th:src】这样的方式，将js和css文件引入是为了部署到服务器上时可以找到对应的文件
②使用正常的方式，如：【href="" scr=""】，将js和css文件静态引入，即编辑静态页面的时候也可以使用js和css文件。
至此，问题解决，欢迎交流。
(推荐)2019/9/2更新：
如果springboot项目仅需要部署在tomcat上运行，推荐使用以下方法：
<link href="/mall/css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/mall/js/common.js"></script>因为springboot项目默认js和css文件会放置在resources/static路径下；html网页则放置在resources/templates路径下，而且事实上我们也会把相关文件放在这个路径下，像是下面这样：
因此，在tomcat上部署完并运行的时候，href="/mall/css/index.css" 这段代码会被自动补全，会到resources下的static下的mall文件夹里去找一个叫index.css的文件并加载该文件。
注意：此方法不能展示静态页面。(不能在不启动tomcat的情况下展示页面)
当然有人会觉得html页面可能需要修改样式什么的，不能静态展示页面修改之后要一遍一遍的重启tomcat更麻烦。
这里推荐解决办法：idea中springboot项目的热部署
1937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
