Jar包部署Angular应用时如何配置自定义上下文localhost:9001/web-app

之前两种方案失效的核心原因是前后端整合场景需要双侧配置对齐，单改某一侧必然出现路径匹配错位，按以下步骤操作即可实现目标，不需要额外调整static目录嵌套结构： #

1. Angular端配置修正 #

你之前在angular.json里加basePath是字段名写错了，正确配置项是baseHref：

• 打开项目根目录的angular.json，找到生产环境构建对应的build -> options节点，添加配置：

"baseHref": "/web-app/",

注意路径末尾必须带斜杠，否则静态资源加载会出现路径拼接错误。

• 配置完成后执行前端生产构建命令：

ng build --prod

• 构建完成后打开dist目录下的index.html做校验，所有script、link标签的资源引用路径都应该以/web-app/开头，代表配置生效。
• 如果你项目里写死了绝对路径的接口请求地址，记得同步对齐前缀，避免接口404。

2. Spring Boot端配置 #

根据你的业务需求二选一即可，不要同时配置两种规则：

方案A：全应用统一上下文路径（后端接口+前端静态资源都走/web-app前缀） #

直接在项目的application.yml（或application.properties）中配置全局服务参数：

server:
  port: 9001
  servlet:
    context-path: /web-app

对应properties格式配置：

server.port=9001
server.servlet.context-path=/web-app

该配置生效后，所有后端接口的访问前缀会自动加上/web-app，前端代码中的接口请求地址需要同步匹配该前缀。

方案B：仅前端静态资源走/web-app前缀，后端接口保留根路径访问 #

不要配置全局context-path，手动添加Spring MVC静态资源映射规则即可：

@Configuration
public class WebAppConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 映射/web-app下的所有静态资源请求到static目录
        registry.addResourceHandler("/web-app/**")
                .addResourceLocations("classpath:/static/");
        // 访问/web-app路径时直接返回首页
        registry.addResourceHandler("/web-app")
                .addResourceLocations("classpath:/static/index.html");
    }

    // 解决Angular History路由模式下刷新页面404的问题
    @Bean
    public WebServerFactoryCustomizer<ConfigurableWebServerFactory> customizer() {
        return factory -> factory.addErrorPages(
                new ErrorPage(HttpStatus.NOT_FOUND, "/web-app/index.html")
        );
    }
}

3. 打包校验 #

1. 把Angular构建生成的dist目录下所有文件直接拷贝到Spring Boot项目的src/main/resources/static目录下，不要在static目录内额外嵌套web-app文件夹，之前做过目录结构调整的记得把多余层级删掉。
2. 执行mvn clean package重新打Jar包，启动后直接访问http://localhost:9001/web-app即可正常加载应用。

踩坑提示：如果启动后出现静态资源404，优先检查两处：一是Angular构建后的index.html里的资源路径是否带/web-app前缀，二是static目录下的文件是否直接放在根目录、没有多余嵌套层级。

内容的提问来源于stack exchange，提问作者Ionita Bogdan