如何跨WAR文件在JSP中引用CSS、JS等UI资源？

阿华AIGC实验室

2026-5-22

我之前刚好处理过类似的多WAR资源分离场景，给你两种实用且优雅的方案，完全避免硬编码localhost和端口的问题，适配开发、测试、生产等不同环境：

正确引用跨WAR UI资源的方法

首先要明确：你的UI资源WAR部署后会有一个独立的上下文路径（比如你把第二个WAR命名为myproject-resources.war，Tomcat这类容器默认会把它的上下文路径设为/myproject-resources；如果需要更简洁的路径，也可以自定义配置，比如/resources，只要不与其他应用冲突即可）。

方法1：用`<base>`标签统一配置根路径（简洁易用）

在JSP页面的<head>标签里先设置<base>，自动适配当前服务器的协议、域名和端口：

<head>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}/">
    <!-- 其他头部内容 -->
</head>

之后引用UI资源时，直接写资源WAR的上下文路径+资源相对路径即可：

<!-- 引用CSS -->
<link rel="stylesheet" href="myproject-resources/css/style.css">
<!-- 引用JS -->
<script src="myproject-resources/js/app.js"></script>
<!-- 引用图片 -->
<img src="myproject-resources/images/logo.png">

这个方法的好处是只需要配置一次<base>，后续所有资源引用都能简化写法，不用重复写冗长的域名端口。

方法2：使用JSTL的`<c:url>`标签（推荐，更专业）

如果你的项目已经引入了JSTL标签库，这个方法更优雅，还能自动处理URL编码：

首先确保JSP顶部引入JSTL核心标签：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

然后引用资源时，通过context属性指定UI资源WAR的上下文路径：

<link rel="stylesheet" href="<c:url context="/myproject-resources" value="/css/style.css" />">
<script src="<c:url context="/myproject-resources" value="/js/app.js" />"></script>
<img src="<c:url context="/myproject-resources" value="/images/logo.png" />">

这个方案的优势：

完全自动适配当前环境的协议、域名和端口，不用手动硬编码
自动处理URL中的特殊字符编码，避免出现乱码问题
清晰区分业务应用和资源应用的上下文，后续维护更方便

关键注意点

❌ 绝对不要硬编码http://localhost:8080，否则部署到生产环境（比如用正式域名https://your-app.com）时，需要批量修改所有资源路径，非常麻烦
确认UI资源WAR的上下文路径正确：比如WAR文件名是myproject-resources.war，容器默认上下文就是/myproject-resources；如果需要自定义路径，可以在容器配置里修改（比如Tomcat的server.xml中给<Context>标签设置path属性）
提前验证资源路径：确保/myproject-resources/css/style.css这类路径确实能访问到你的资源文件，可以直接在浏览器里输入路径测试

内容的提问来源于stack exchange，提问作者Antony SUTHAKAR J