答案：通过后端REST接口暴露Spring Boot Profile信息，前端JavaScript运行时获取并动态加载对应配置。具体步骤包括：① Spring Boot提供/env接口返回激活的Profile；② 前端初始化时请求该接口，根据返回的环境值（如dev、prod）设置API地址、调试模式等配置；③ 可选构建时注入方式，在Maven/Gradle打包阶段将Profile写入静态JS文件。推荐运行时API方案以提升灵活性，确保前后端环境一致，避免部署错误。
在现代前后端分离的开发架构中，前端JavaScript应用常需根据后端Spring Boot的Profile环境（如dev、test、prod）动态调整配置。实现JavaScript与Spring Profile的集成，有助于统一环境管理、减少部署错误。以下是具体操作指南。
理解Spring Profile的作用
Spring Boot通过Profile机制支持多环境配置，例如：
- application-dev.yml：开发环境
- application-test.yml：测试环境
- application-prod.yml：生产环境
启动时通过spring.profiles.active=dev指定当前激活的环境。前端JavaScript若能感知该状态，即可动态加载对应配置。
通过后端接口暴露Profile信息
让JavaScript获取当前环境，最可靠方式是通过后端提供一个公开的REST接口返回Profile信息。
立即学习“Java免费学习笔记（深入）”；
示例代码（Spring Boot Controller）：
@RestController
public class EnvController {
@Value("${spring.profiles.active}")
private String activeProfile;
@GetMapping("/api/env")
public Map getEnvironment() {
Map env = new HashMap<>();
env.put("profile", activeProfile);
return env;
}
}
前端JavaScript在页面初始化时请求/api/env，即可获知当前运行环境。
前端根据Profile动态加载配置
JavaScript获取环境后，可加载对应的配置文件或行为逻辑。
示例（使用fetch获取并处理）：
fetch('/api/env')
.then(response => response.json())
.then(data => {
const profile = data.profile;
let config = {};
if (profile === 'prod') {
config.apiUrl = 'https://api.example.com';
config.debug = false;
} else {
config.apiUrl = 'https://dev-api.example.com';
config.debug = true;
}
window.APP_CONFIG = config;
})
.catch(err => console.error('无法获取环境信息', err));
此后，整个前端应用可通过window.APP_CONFIG访问适配当前环境的配置。
构建时注入Profile（可选方案）
若无法在运行时调用接口，可在构建阶段将Spring Profile信息注入前端资源。
方法：在Maven或Gradle构建时，通过资源过滤将Profile写入静态JS文件。
例如，在src/main/resources/config.js中：
window.BUILD_PROFILE = '${spring.profiles.active}';
Maven启用资源过滤后，占位符会被实际值替换。前端直接读取window.BUILD_PROFILE即可。
基本上就这些。推荐优先使用运行时API方式，更灵活且无需重新构建前端。构建时注入适合静态部署场景。关键是确保前后端环境标识一致，避免配置错乱。
