Maven部署前端到Tomcat时如何在HTML和JS中引入抽离的环境变量

最优实现步骤 #

步骤1：创建统一环境配置文件 #

在myproject/src/main/resources/public目录下新建env.js文件，将所有环境变量统一挂载到全局window对象上，避免作用域冲突：

// 全局环境配置，切换环境仅需修改此处
window.envConfig = {
  // 本地开发环境
  // envURL: "http://localhost:8080",
  // 开发环境
  envURL: "https://myserver-dev.com",
  // 测试环境
  // envURL: "https://myserver-test.com"
  // 后续其他环境变量均可在此处扩展
}

步骤2：修改index.html引入配置并替换硬编码地址 #

首先在index.html的<head>标签内（或所有业务脚本之前）引入env.js，确保环境配置先加载完成，再修改按钮的跳转逻辑：

<!-- 优先加载环境配置，必须放在所有使用配置的代码之前 -->
<script src="./env.js"></script>

<!-- 原有按钮修改为动态取环境地址，同时清理id属性多余空格 -->
<button type="button" id="bButton" onclick="location.href = window.envConfig.envURL + '/Builder/builder.html'">Builder</button>

如果你的项目支持ES6模板字符串，也可以写成${window.envConfig.envURL}/Builder/builder.html的形式，可读性更高。

步骤3：修改builder.js读取全局配置 #

删除builder.js中原有的三行envURL定义代码，直接读取全局环境配置即可，可按需添加兜底逻辑避免配置加载失败的问题：

// 直接读取全局环境配置，添加兜底地址兼容异常场景
const envURL = window.envConfig?.envURL || "http://localhost:8080";

// 后续原有逻辑直接使用envURL变量即可，无需修改其他代码

可选优化：Maven自动切换环境配置 #

如果需要在打包时自动适配不同环境，无需手动修改env.js的注释，可以通过Maven资源过滤功能实现：

1. 修改env.js中的envURL为占位符：

window.envConfig = {
  envURL: "@env.url@"
}

2. 在pom.xml中配置不同环境的profile，开启src/main/resources目录的资源过滤即可，打包时指定对应profile会自动替换占位符为对应环境地址。

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