HTML引用跨文件夹JavaScript文件路径报错，求解决方案

从你给出的报错信息一眼就能定位问题：浏览器正尝试从 http://localhost:8080/admintool/selectItem/static/js/itemInventory.js 加载JS文件，但你的实际JS文件是放在项目根目录下的 static/js/ 文件夹里的，路径引用完全错配了。下面给你几个靠谱的解决方案：

方案1：使用根绝对路径（最直接稳妥） #

直接在你的 itemInventory.ms 文件里，把JS的引用路径改成从网站根目录开始的绝对路径：

<script src="/admintool/static/js/itemInventory.js"></script>

这样不管当前页面的URL是什么层级，浏览器都会从 http://localhost:8080/admintool/ 这个根路径开始查找JS文件，不会再跟着当前页面的路径瞎拼接。

方案2：利用服务器上下文路径（推荐，适配多环境） #

如果你的项目是基于Spring MVC这类Java Web框架的，别硬写死admintool这个项目名，用服务器提供的上下文路径变量来动态拼接，这样后续部署到不同环境（比如上下文路径变更）也不用改代码：

<script src="${pageContext.request.contextPath}/static/js/itemInventory.js"></script>

这个${pageContext.request.contextPath}会自动替换成你的项目上下文路径（也就是这里的admintool），灵活性拉满。

方案3：使用相对路径（不推荐，易踩坑） #

如果非要用相对路径，得计算当前页面路径到目标JS文件的层级差。当前页面的URL是/admintool/selectItem/showAllItems，相当于在selectItem子路径下，所以需要退两级回到项目根目录，再指向static/js：

<script src="../../static/js/itemInventory.js"></script>

不过这种方法缺点很明显——如果后续页面的URL结构变动，这个路径就会失效，维护起来麻烦。

验证方法 #

改完路径后刷新页面，打开浏览器的「开发者工具」→「Network」标签，查看JS文件的请求地址是否变成了http://localhost:8080/admintool/static/js/itemInventory.js，如果能成功加载（状态码200），说明问题解决了。

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