You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Spring MVC问题:CSS与JS无法应用到JSP页面

解决Spring MVC首页CSS/JS无法加载的问题

嘿,这是Spring MVC开发里超常见的静态资源坑,咱们一步步捋清楚解决办法:

1. 先查DispatcherServlet的URL映射(最可能的原因)

看你提供的web.xml片段,大概率是DispatcherServlet的url-pattern设成了/*——这个配置会让Spring拦截所有请求,包括CSS、JS这类静态资源,而它根本处理不了这些文件,自然就加载失败了。

赶紧改成/试试,正确配置示例:

<servlet>
    <servlet-name>SpringMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>SpringMVC</servlet-name>
    <url-pattern>/</url-pattern> <!-- 这里用/,别用/* -->
</servlet-mapping>

/的作用是拦截除JSP之外的所有请求,静态资源会交给容器自动处理,不会被Spring拦下来。

2. 配置Spring MVC静态资源映射(如果上面的方法没解决)

要是你必须用/或者还是有问题,就在Spring MVC的配置文件(比如spring-servlet.xml)里明确告诉Spring哪些是静态资源:

<!-- 先确保xml里引入了mvc命名空间 -->
<beans xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 映射静态资源路径 -->
    <mvc:resources mapping="/resources/**" location="/resources/"/>
    <!-- 开启注解驱动,保证控制器请求正常处理 -->
    <mvc:annotation-driven/>
</beans>
  • mapping="/resources/**":所有以/resources/开头的请求都被当作静态资源
  • location="/resources/":指定这些资源在项目里的实际存放位置(比如你把css、js放在webapp/resources目录下)

3. 页面里的资源引用要绝对路径

别用相对路径!很容易因为页面跳转路径变化导致资源找不到,推荐两种靠谱写法:

方式一:用JSTL的<c:url>标签(需要先引入JSTL依赖)

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="<c:url value='/resources/css/style.css'/>">
<script src="<c:url value='/resources/js/main.js'/>"></script>

方式二:用EL表达式拿上下文路径

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/style.css">
<script src="${pageContext.request.contextPath}/resources/js/main.js"></script>

不管你的项目部署在什么上下文路径下,这样写都能精准找到资源。

4. 检查静态资源的存放位置

一定要把CSS、JS放在webapp根目录或者它的子目录里(比如webapp/resources/css),别放WEB-INF里——WEB-INF下的资源不能直接通过浏览器请求访问,必须通过控制器转发,静态资源放这儿肯定加载不了。

给你个标准的目录结构参考:

webapp/
├── resources/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── main.js
├── WEB-INF/
│   ├── web.xml
│   └── spring-servlet.xml
└── index.jsp

内容的提问来源于stack exchange,提问作者Chaitanya

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.22 08:10:40