Spring Boot 2.0 Web应用中如何从静态JS文件访问Java变量？

嘿，手动注释切换环境变量确实够烦的，我给你几个Spring生态里常用的解决方案，都能帮你彻底摆脱手动切换的麻烦：

这是Spring Boot项目里最常用的做法，步骤超简单：

• 先确保你的项目引入了Thymeleaf（Spring Boot的web starter默认自带，如果没加的话，直接在pom.xml里加依赖就行）
• 在你的HTML入口文件（比如index.html）里，先通过Thymeleaf把后端配置的值注入成全局JS变量：

  <script th:inline="javascript">
      /*<![CDATA[*/
      // 从Spring环境变量里取配置值，@environment是Spring的环境上下文
      window.baseUrl = [[${@environment.getProperty('app.base.url')}]];
      /*]]>*/
  </script>
  <!-- 记得把main.js放在这个脚本之后加载 -->
  <script src="/js/main.js"></script>
  

  这里的app.base.url就是你在application-dev.properties和application-prod.properties里定义的键，比如dev环境写app.base.url=/localhost:8382/myservice，prod环境写app.base.url=/example.com/myservice
• 最后在main.js里直接用这个全局变量就行，把原来的硬编码替换成：

  var base = window.baseUrl;
  

  启动项目时，Spring会根据当前激活的Profile自动替换对应的值，完全不用手动改JS了。

如果你的前端是完全独立的静态文件，不想和模板引擎耦合，那可以写个简单的后端接口返回配置：

• 后端写个轻量的Controller：

  @RestController
  @RequestMapping("/api/config")
  public class ConfigController {
      // 用@Value直接注入对应环境的配置值
      @Value("${app.base.url}")
      private String baseUrl;
  
      @GetMapping("/base-url")
      public String getBaseUrl() {
          return baseUrl;
      }
  }
  

• 然后在main.js初始化的时候调用这个接口获取值：

  var base;
  // 这里用原生fetch示例，用axios也一样
  fetch('/api/config/base-url')
      .then(response => response.text())
      .then(url => {
          base = url;
          // 注意：依赖base变量的代码要放在这里，确保拿到值再执行
          initMyService(); // 比如你的初始化函数
      })
      .catch(err => console.error('加载base地址失败:', err));
  

  这个方案的好处是前端完全不用改打包流程，缺点是要处理异步加载的问题，确保依赖base的逻辑在获取到值之后再执行。

如果你的前端用Webpack/Vite这类工具打包，还可以结合Maven/Gradle的构建插件，在构建阶段根据Spring Profile自动替换JS里的变量：

• 先在main.js里留个占位符：

  var base = '${APP_BASE_URL}';
  

• 然后用Maven的maven-replacer-plugin来做替换，在pom.xml里加配置：

  <plugin>
      <groupId>com.google.code.maven-replacer-plugin</groupId>
      <artifactId>replacer</artifactId>
      <version>1.5.3</version>
      <executions>
          <execution>
              <phase>prepare-package</phase>
              <goals>
                  <goal>replace</goal>
              </goals>
          </execution>
      </executions>
      <configuration>
          <file>src/main/resources/static/js/main.js</file>
          <replacements>
              <replacement>
                  <token>${APP_BASE_URL}</token>
                  <value>${app.base.url}</value>
              </replacement>
          </replacements>
      </configuration>
  </plugin>
  

  这样执行构建命令的时候，比如mvn clean package -Dspring.profiles.active=prod，插件会自动把JS里的占位符替换成prod环境的配置值，打包出来的文件直接就能用。

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