为Spring Boot部署的React应用配置动态环境URL

一、在Maven中配置多环境Profile #

在pom.xml的<project>标签下添加环境Profile，为每个环境定义专属的API URL属性：

<profiles>
    <!-- 本地开发环境（默认激活） -->
    <profile>
        <id>local</id>
        <activation>
            <activeByDefault>true</activeByDefault>
        </activation>
        <properties>
            <api.base.url>http://localhost:8080/api/</api.base.url>
        </properties>
    </profile>
    <!-- 预发布环境 -->
    <profile>
        <id>stage</id>
        <properties>
            <api.base.url>https://www.stageUrl.com/api/</api.base.url>
        </properties>
    </profile>
    <!-- 生产环境 -->
    <profile>
        <id>prod</id>
        <properties>
            <api.base.url>https://www.prodUrl.com/api/</api.base.url>
        </properties>
    </profile>
</profiles>

二、修改React代码，替换硬编码URL为占位符 #

将React的axios配置文件中的固定URL替换为Maven可识别的占位符：

import axios from 'axios';

export const widgetAxiosClient = () => {
  const client = axios.create({
     baseURL: "${api.base.url}"
  });

  return { client };
};

三、调整Maven资源插件配置，确保占位符替换生效 #

修改maven-resources-plugin配置，指定需要过滤的文件范围，避免无差别处理所有资源影响性能：

<plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <version>3.2.0</version>
    <executions>
        <execution>
            <id>copy-resources</id>
            <phase>process-resources</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <outputDirectory>${basedir}/target/classes/static</outputDirectory>
                <resources>
                    <!-- 对包含API URL的文件启用过滤 -->
                    <resource>
                        <directory>src/main/webapp/build</directory>
                        <filtering>true</filtering>
                        <includes>
                            <include>**/axios-client.js</include>
                            <include>**/main.*.js</include>
                        </includes>
                    </resource>
                    <!-- 其他资源直接复制，不进行过滤 -->
                    <resource>
                        <directory>src/main/webapp/build</directory>
                        <filtering>false</filtering>
                        <excludes>
                            <exclude>**/axios-client.js</exclude>
                            <exclude>**/main.*.js</exclude>
                        </excludes>
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
</plugin>

四、构建与运行命令 #

根据目标环境选择对应的Maven命令构建：

• 本地环境（默认）：

mvn clean package

• 预发布环境：

mvn clean package -P stage

• 生产环境：

mvn clean package -P prod

构建完成后，直接启动打包后的Spring Boot应用即可，React会自动使用对应环境的API URL。

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