Spring Boot项目中WebJars（Popper.js/Font Awesome）引用路径修正

Popper.js 路径修正 #

你遇到的路径问题是因为WebJars中npm包的结构和你预期的不一样，不需要在路径里加上npm前缀。另外，Bootstrap 4要求Popper.js使用UMD格式的文件，所以正确的引用路径应该指向umd目录下的文件：

<script th:src="@{/webjars/popper.js/1.13.0/umd/popper.min.js}" type="text/javascript"></script>

如果不想写死版本号，可以利用webjars-locator的特性，省略版本号让它自动匹配：

<script th:src="@{/webjars/popper.js/umd/popper.min.js}" type="text/javascript"></script>

Font Awesome 5 路径修正 #

Font Awesome 5的WebJar目录结构和旧版本差异很大，你用的5.0.2版本中，CSS文件不在dist目录下，而是直接放在css目录里。正确的引用路径应该是：

<link rel="stylesheet" th:href="@{/webjars/font-awesome/css/fontawesome.min.css}" />

如果需要加载全量图标样式（包括solid、regular等系列），可以引用all.min.css：

<link rel="stylesheet" th:href="@{/webjars/font-awesome/css/all.min.css}" />

快速验证小技巧 #

要是你不确定WebJars里的文件结构，可以启动Spring Boot项目后，访问http://localhost:8080/webjars/（替换成你的项目端口），就能看到所有WebJar包的完整目录结构，直接从中复制正确的文件路径即可。

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