通过后端REST接口暴露配置，前端动态获取运行时参数；2. 构建时结合模板引擎注入配置；3. 共用JSON文件由双方读取；4. 使用配置中心统一管理，实现灵活更新。
JavaScript前端应用与Spring Boot后端服务在实际项目中经常需要共享配置信息，比如API地址、功能开关、国际化参数等。为了实现灵活部署和环境适配，通常采用外部化配置方式。下面介绍几种将JavaScript与Spring Boot外部化配置有效结合的方法。
1. 通过后端接口暴露配置
Spring Boot可以通过一个REST接口将外部化配置（如application.yml或环境变量）返回给前端JavaScript使用。
示例：
在Spring Boot中创建一个配置控制器：
立即学习“Java免费学习笔记（深入）”；
@RestController
public class ConfigController {
@Value("${api.base.url:http://localhost:8080/api}")
private String apiUrl;
@Value("${feature.toggle.debug-mode:false}")
private boolean debugMode;
@GetMapping("/config")
public Map getConfig() {
Map config = new HashMap<>();
config.put("apiUrl", apiUrl);
config.put("debugMode", debugMode);
return config;
}
}
前端JavaScript在页面加载时请求该配置：
fetch('/config')
.then(response => response.json())
.then(config => {
window.APP_CONFIG = config;
console.log('API地址:', config.apiUrl);
});
这样前端就能动态获取后端的运行时配置，无需硬编码。
2. 构建时注入配置（适用于静态部署）
如果前端是静态资源（如Vue、React构建产物），可以在构建过程中将Spring Boot的配置写入HTML或JS文件。
方法之一：使用Thymeleaf模板在HTML中内联配置：
这种方式在页面渲染时自动注入当前环境的配置值，适合服务端模板渲染场景。
3. 使用环境变量与公共配置文件
将共用配置提取到独立文件，例如config.json，由Spring Boot和前端构建工具共同读取。
例如，在src/main/resources/config.json中定义：
{
"apiUrl": "http://localhost:8080/api",
"enableTracking": false
}
Spring Boot可通过@ConfigurationProperties加载此JSON文件（需添加Jackson支持）。
前端构建脚本（如Webpack、Vite）可在构建时读取同一文件并嵌入打包结果中，实现配置复用。
4. 配置中心统一管理（高级方案）
对于微服务架构，可使用Spring Cloud Config或Nacos等配置中心统一管理所有环境配置。
前端应用可通过轻量API从配置中心拉取所需配置，或由网关代理注入配置响应。
优点是配置变更无需重启服务或重新构建前端，适合多环境、高频变更场景。
基本上就这些常用方式。选择哪种取决于你的部署结构和灵活性需求。小项目推荐第一种接口方式，大型系统可考虑配置中心集成。关键是避免前后端配置不一致，提升可维护性。
