Spring MVC无法识别HTML文件中引用的静态资源问题

我之前整合前后端生成单WAR包时也踩过一模一样的坑，核心问题就是Spring MVC的静态资源映射规则没配置对，再加上Angular单页路由的特殊情况需要处理。下面给你一步步捋解决方案：

1. 先确认静态资源的存放位置 #

首先确保你把Angular执行ng build生成的dist目录内容，放到了Spring MVC项目的src/main/webapp目录下——比如直接把整个dist文件夹放进去，最终路径就是src/main/webapp/dist。这样maven打包WAR时，这些静态文件会被自动包含到WAR包的对应位置。

2. 配置Spring MVC的静态资源映射 #

Spring MVC默认不会自动识别所有静态资源，必须明确告诉它去哪里找这些文件：

如果你用XML配置（比如spring-servlet.xml） #

添加mvc:resources标签，指定请求路径和实际文件的存放位置：

<!-- 让所有请求路径都能映射到dist目录下的静态资源 -->
<mvc:resources mapping="/**" location="/dist/" />

这里mapping="/**"表示所有前端请求都会先匹配静态资源，location="/dist/"对应你存放Angular打包文件的目录。

如果你用Java配置（@Configuration类） #

实现WebMvcConfigurer并重写addResourceHandlers方法：

@Configuration
@EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 映射所有请求到dist目录下的静态资源
        registry.addResourceHandler("/**")
                .addResourceLocations("/dist/");
    }
}

3. 处理Angular单页路由的刷新问题 #

Angular是单页应用，当你刷新页面或者直接访问某个前端路由（比如/users）时，Spring MVC会误以为这是后端接口请求，导致返回404。这时候需要配置一个默认转发，把所有非API的请求转到Angular的index.html：

XML配置方式 #

添加mvc:view-controller：

<!-- 把所有非API的请求转发到index.html，交给Angular处理路由 -->
<mvc:view-controller path="/**" view-name="forward:/dist/index.html" />

如果你的项目有独立的API接口（比如路径是/api/**），可以把匹配规则改成path="/{path:^(?!api).*$}"，避免API请求被错误转发。

Java配置方式 #

重写addViewControllers方法：

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    // 转发所有非API请求到index.html
    registry.addViewController("/{path:^(?!api).*$}")
            .setViewName("forward:/dist/index.html");
}

4. 打包时设置正确的base-href #

Angular打包时必须指定base-href，对应Spring MVC应用的上下文路径。比如你的WAR部署到Tomcat后，访问路径是http://localhost:8080/my-crud-app，那么打包命令应该是：

ng build --base-href /my-crud-app/

这样Angular生成的静态资源路径会自动带上上下文路径，避免出现资源404的情况。

最后检查打包配置 #

确保你的pom.xml里的maven-war-plugin没有排除dist目录——默认情况下插件会包含src/main/webapp下的所有内容，只要你放对了位置，打包时这些静态文件会被自动加入WAR包。

按照这些步骤配置后，应该就能正常加载静态资源，同时Angular的路由也能正常工作了。

内容的提问来源于stack exchange，提问作者Omkar Shetkar