news 2026/6/10 16:12:46

SSM整合HTML:解决CSS/JS静态资源被过滤问题

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
SSM整合HTML:解决CSS/JS静态资源被过滤问题

SSM 整合 HTML:解决 CSS/JS 静态资源被过滤问题(最常见原因 + 完整解决方案)

在 SSM(Spring + SpringMVC + MyBatis)项目中,前端静态资源(css、js、images、fonts 等)经常出现404被拦截的情况,主要原因几乎都是SpringMVC 的 DispatcherServlet 把静态资源请求也拦截了

下面按最常见场景 → 问题原因 → 解决方案的顺序,给你最实用、最完整的处理方式(2025-2026 主流做法)。

问题现象(你很可能遇到的几种情况)

  1. 页面引入的 css/js 路径正确,但浏览器显示 404

    <linkrel="stylesheet"href="/static/css/style.css"><scriptsrc="/static/js/jquery.min.js"></script>

    控制台报错:Failed to load resource: the server responded with a status of 404

  2. 使用${pageContext.request.contextPath}后仍然 404

  3. 部分路径能访问(如/index.html),但/static/**下的全部 404

核心原因

SpringMVC 的前端控制器<url-pattern>/</url-pattern>会拦截所有请求,包括静态资源请求。
而 SpringMVC 默认不处理静态资源,导致这些请求被当作普通请求处理,找不到 Controller 就返回 404。

解决方案(按推荐优先级排序)

方案1:使用<mvc:resources>标签(最常用、最推荐)

spring-mvc.xml(或 Java Config)中添加静态资源映射。

XML 配置方式(SpringMVC 传统项目)

<!-- spring-mvc.xml --><!-- 静态资源映射 --><mvc:resourcesmapping="/static/**"location="/static/"cache-period="31536000"/><!-- 或者更清晰的写法:分开映射 --><mvc:resourcesmapping="/css/**"location="/static/css/"/><mvc:resourcesmapping="/js/**"location="/static/js/"/><mvc:resourcesmapping="/images/**"location="/static/images/"/><mvc:resourcesmapping="/fonts/**"location="/static/fonts/"/><!-- 重要:不要忘记这一行 --><mvc:annotation-driven/>

说明

  • mapping:浏览器访问的路径前缀
  • location:项目中实际存放的目录(相对于 webapp 或 resources/static)
  • 推荐统一放在/static/下,路径清晰

HTML 中引用方式(推荐相对路径或 contextPath)

<!-- 方式1:推荐 --><linkrel="stylesheet"href="${pageContext.request.contextPath}/static/css/style.css"><!-- 方式2:项目根路径(开发阶段常用) --><linkrel="stylesheet"href="/static/css/style.css">
方案2:使用 Java 配置(SpringMVC 纯注解项目)
@Configuration@EnableWebMvc@ComponentScan("com.yourcompany.controller")publicclassWebMvcConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddResourceHandlers(ResourceHandlerRegistryregistry){registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/").setCachePeriod(31536000);// 一年缓存// 也可以分开写,更清晰registry.addResourceHandler("/css/**").addResourceLocations("classpath:/static/css/");registry.addResourceHandler("/js/**").addResourceLocations("classpath:/static/js/");}}

注意:如果你的静态资源放在src/main/webapp/static/下,则写:

.addResourceLocations("/static/")
方案3:使用 Spring Boot(如果你的项目是 Spring Boot)

Spring Boot 默认已经开启了静态资源映射,几乎不需要额外配置。

默认规则(Boot 2.x / 3.x 都适用):

  • /static//public//resources//META-INF/resources/目录下的文件
  • 访问路径:/css/style.css→ 自动映射到以上目录

项目结构示例(Spring Boot 推荐):

src/main/resources/ └─ static/ ├─ css/ ├─ js/ ├─ images/ └─ fonts/

HTML 引用

<linkrel="stylesheet"href="/css/style.css"><scriptsrc="/js/app.js"></script>

如果 Boot 里还是 404,检查是否:

  • 关闭了 WebMvc 自动配置(@EnableWebMvc 会禁用默认静态资源)
  • 路径写错了(Boot 不需要加 /static/ 前缀)
方案4:临时应急(不推荐长期使用)

在 web.xml 中把 DispatcherServlet 的 url-pattern 改成*.do/action/*,让它不拦截静态资源。

<servlet-mapping><servlet-name>dispatcher</servlet-name><url-pattern>*.do</url-pattern></servlet-mapping>

缺点:路径风格不统一,项目后期维护麻烦。

快速排查 Checklist(遇到 404 就按顺序查)

  1. 确认静态资源真的在正确目录下(/static/css/style.css 是否存在)
  2. 浏览器 F12 → Network 看请求路径是否正确
  3. 确认 spring-mvc.xml 中有<mvc:resources ... />或 Java Config
  4. 确认有<mvc:annotation-driven />(或@EnableWebMvc
  5. 检查是否用了@EnableWebMvc(会导致 Boot 默认静态资源失效)
  6. 确认项目部署后,tomcat/web 容器能访问到静态文件(可直接输入 http://localhost:8080/static/css/style.css 测试)
  7. 最后:重启服务器、清空浏览器缓存

推荐的项目目录结构(SSM 经典)

webapp/ ├─ WEB-INF/ │ ├─ web.xml │ ├─ spring-mvc.xml │ └─ applicationContext.xml ├─ static/ │ ├─ css/ │ ├─ js/ │ ├─ images/ │ └─ fonts/ ├─ WEB-INF/views/ │ └─ index.jsp └─ index.jsp

总结:最简有效配置口诀

SSM 传统项目
在 spring-mvc.xml 里加一行

<mvc:resourcesmapping="/static/**"location="/static/"/>

Spring Boot 项目
把静态资源放在src/main/resources/static/下,直接用/css/xx.css访问

HTML 中引用
始终推荐用${pageContext.request.contextPath}/static/css/xx.css

这样做,99% 的 SSM 项目静态资源 404 问题都能解决。

如果你的项目仍然不行,请告诉我:

  • 你用的是纯 SSM 还是 Spring Boot?
  • 静态资源具体放在哪个目录?
  • 浏览器请求的完整 URL 是多少?
  • spring-mvc.xml 里有没有<mvc:resources>

把这些信息贴出来,我可以帮你秒定位问题。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 6:44:32

基于单片机的智能车位锁的设计与实现

基于单片机的智能车位锁的设计与实现 第一章 设计背景与核心目标 城市停车资源紧张背景下&#xff0c;私人车位被占用、公共车位管理低效等问题突出&#xff0c;传统机械车位锁操作繁琐、无防占用预警功能&#xff0c;电动车位锁又存在控制方式单一、续航短、安全防护不足等缺陷…

作者头像 李华
网站建设 2026/6/10 13:45:12

是德科技 E5061B 矢量网络分析仪阻抗分析技术解析

在射频、微波及电子工程领域&#xff0c;阻抗分析是保障产品性能的核心环节&#xff0c;是德科技 E5061B 矢量网络分析仪凭借精准测量能力与灵活适配性&#xff0c;成为该领域的优选设备。本文聚焦其阻抗分析核心优势、操作要点与典型应用&#xff0c;为技术人员提供实操参考。…

作者头像 李华
网站建设 2026/6/9 21:34:11

国产矢量网络分析仪:从“参数追赶”到“信任构建”的跨越

曾几何时&#xff0c;国内顶尖实验室的机架上&#xff0c;清一色是德科技&#xff08;Keysight&#xff09;或罗德与施瓦茨&#xff08;R&S&#xff09;的身影&#xff0c;国产仪器似乎仅能屈居教学或辅助之位。然而&#xff0c;这一固有格局正在被悄然打破。透过各大高校与…

作者头像 李华
网站建设 2026/6/10 13:46:03

RAG技术全攻略:从零构建个人知识库智能助手,附完整集成教程

《RAG Handbook》系统介绍如何基于检索增强生成(RAG)技术&#xff0c;从零开始构建能够理解和利用个人知识库的智能聊天机器人&#xff0c;并将其无缝集成到网站或应用中。该书旨在帮助读者打造个人智能助手&#xff0c;提升工作效率&#xff0c;优化知识管理&#xff0c;建立个…

作者头像 李华
网站建设 2026/6/10 15:08:21

扭蛋机盲盒小程序前端功能设计解析:打造趣味与惊喜并存的消费体验

在年轻消费群体追求个性化与娱乐化购物的趋势下&#xff0c;扭蛋机盲盒小程序通过融合随机抽取机制与社交互动功能&#xff0c;为用户提供兼具趣味性与收藏价值的消费场景。其前端设计需平衡娱乐性展示与便捷操作&#xff0c;以下从核心功能模块与用户体验优化两个维度&#xf…

作者头像 李华