SpringMVC 靜態資源（JS/CSS）404 無法訪問：配置 <mvc:resources> 映射解決

問題現象

頁面引入 /resources/easyui/... 等靜態資源全部報 **404 Not Found**，雖然文件確實存在於 WebContent/resources 目錄下。

根本原因

SpringMVC 的 DispatcherServlet 默認攔截所有請求（包括靜態資源），**未配置靜態資源映射**時，會嘗試尋找對應 Controller，找不到拋 404。

解決方案：配置 <mvc:resources>

Spring XML 配置

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="https://www.springframework.org/schema/beans"
       xmlns:mvc="https://www.springframework.org/schema/mvc"
       xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="
           https://www.springframework.org/schema/beans
           https://www.springframework.org/schema/beans/spring-beans.xsd
           https://www.springframework.org/schema/mvc
           https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 開啟註解驅動 -->
    <mvc:annotation-driven />

    <!-- 靜態資源映射：關鍵配置 -->
    <mvc:resources mapping="/resources/**" location="/resources/" />
    <mvc:resources mapping="/static/**" location="/static/" />
    <mvc:resources mapping="/js/**" location="/js/" />
    <mvc:resources mapping="/css/**" location="/css/" />
    <mvc:resources mapping="/images/**" location="/images/" />

    <!-- 其他配置... -->
</beans>

Spring Boot 配置（application.yml）

spring:
  mvc:
    static-path-pattern: /resources/**
  web:
    resources:
      static-locations: classpath:/resources/,classpath:/static/,classpath:/public/

Java Config 方式

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**")
                .addResourceLocations("/resources/")
                .setCachePeriod(3600); // 緩存 1 小時
        
        registry.addResourceHandler("/static/**")
                .addResourceLocations("/static/");
    }
}

頁面引用路徑修正

<!-- 使用項目上下文路徑，避免相對路徑問題 -->
<%=request.getContextPath()%>/resources/easyui/themes/default/easyui.css

<!-- 或使用 JSTL core -->
<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<link href="<c:url value='/resources/easyui/themes/default/easyui.css'/>" rel="stylesheet" />

<!-- JS -->
<script src="<c:url value='/resources/easyui/jquery.min.js'/>"></script>

目錄結構對照

WebContent/
├── resources/
│   ├── easyui/
│   │   ├── themes/default/easyui.css
│   │   ├── jquery.min.js
│   │   └── ...
│   ├── css/
│   ├── js/
│   └── images/
├── WEB-INF/
│   ├── web.xml
│   └── spring-mvc.xml
└── index.jsp

常見坑點

驗證步驟

1. 重啟項目
2. 瀏覽器直接訪問：https://localhost:8080/項目名/resources/easyui/jquery.min.js
3. 網絡面板確認返回 200 且 Content-Type 為 application/javascript

總結

**核心動作**：在 Spring MVC 配置中添加 <mvc:resources mapping="/resources/**" location="/resources/" />，讓 DispatcherServlet 放行靜態資源請求交由容器默認 Servlet 處理。