如何在JHipster单体应用中同时构建两个Angular前端而不覆盖？

问题分析 #

你的核心问题是两个前端构建产物都输出到了同一个静态资源目录，且Admin UI的构建步骤晚于自定义前端，导致文件被覆盖。要实现两者共存，需要从构建路径分离和访问路由/端口配置两个维度处理。

一、调整构建配置，避免产物覆盖 #

1. 优化自定义前端的资源复制逻辑（避免污染源码目录） #

当前自定义前端的配置会将构建产物复制到src/main/resources/static（源码目录），建议改为直接输出到target/classes/static（构建目录），避免修改源码：

<plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <executions>
        <execution>
            <id>copy-custom-frontend</id>
            <phase>process-resources</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                <resources>
                    <resource>
                        <directory>ui/dist/apps/nosi</directory>
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
</plugin>

2. 为Admin UI添加独立的资源复制配置 #

JHipster生成的Admin UI默认构建产物会覆盖根静态目录，需要添加资源复制插件，将其输出到target/classes/static/admin子目录：

<!-- 保留原Admin UI的frontend-maven-plugin，补充workingDirectory指向Admin UI源码目录 -->
<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <configuration>
        <workingDirectory>frontend</workingDirectory> <!-- 替换为你的Admin UI实际源码目录 -->
    </configuration>
    <executions>
        <execution>
            <id>install-node-and-npm-admin</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
                <nodeVersion>${node.version}</nodeVersion>
                <npmVersion>${npm.version}</npmVersion>
            </configuration>
        </execution>
        <execution>
            <id>npm-install-admin</id>
            <goals>
                <goal>npm</goal>
            </goals>
        </execution>
        <execution>
            <id>webapp-build-admin</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
                <arguments>run webapp:build</arguments>
                <environmentVariables>
                    <APP_VERSION>${project.version}</APP_VERSION>
                </environmentVariables>
                <npmInheritsProxyConfigFromMaven>false</npmInheritsProxyConfigFromMaven>
            </configuration>
        </execution>
    </executions>
</plugin>

<!-- 添加Admin UI资源复制插件，指定独立输出目录 -->
<plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <executions>
        <execution>
            <id>copy-admin-ui</id>
            <phase>process-resources</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <outputDirectory>${project.build.outputDirectory}/static/admin</outputDirectory>
                <resources>
                    <resource>
                        <directory>frontend/dist</directory> <!-- 替换为Admin UI实际构建产物目录 -->
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
</plugin>

二、配置双端口访问（实现localhost:8080/8081分别访问两个前端） #

如果需要用不同端口区分两个前端，需配置Tomcat添加额外连接器：

1. 在application.yml中添加端口配置 #

server:
  port: 8080 # 自定义前端访问端口
  admin:
    port: 8081 # Admin UI访问端口

2. 编写Tomcat配置类 #

创建TomcatConfig.java实现双端口监听与路由映射：

import org.apache.catalina.connector.Connector;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;
import org.springframework.boot.web.servlet.server.ServletWebServerFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class TomcatConfig implements WebMvcConfigurer {

    @Value("${server.admin.port}")
    private int adminPort;

    @Bean
    public ServletWebServerFactory servletContainer() {
        TomcatServletWebServerFactory tomcat = new TomcatServletWebServerFactory();
        tomcat.addAdditionalTomcatConnectors(createAdminConnector());
        return tomcat;
    }

    private Connector createAdminConnector() {
        Connector connector = new Connector(TomcatServletWebServerFactory.DEFAULT_PROTOCOL);
        connector.setPort(adminPort);
        connector.setScheme("http");
        connector.setRedirectPort(8443);
        return connector;
    }

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 根路径映射自定义前端首页
        registry.addViewController("/").setViewName("forward:/index.html");
        // /admin路径映射Admin UI首页
        registry.addViewController("/admin").setViewName("forward:/admin/index.html");
        // 处理Angular路由刷新404问题
        registry.addViewController("/admin/**").setViewName("forward:/admin/index.html");
    }
}

三、验证效果 #

1. 执行mvn clean install，两个前端产物会分别输出到target/classes/static和target/classes/static/admin，无覆盖问题。
2. 启动应用：
   • 访问localhost:8080查看自定义前端
   • 访问localhost:8081/admin查看Admin UI

如果不需要双端口，仅通过路径区分（localhost:8080和localhost:8080/admin），可跳过双端口配置，仅保留构建配置和WebMvcConfigurer中的路由映射即可。

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