如何在React/Vue/Angular等JS框架代码中访问JBOSS系统属性

首先明确结论：不可以直接在前端构建阶段绑定JBoss的System-Properties。原因是React、Vue、Angular这类前端框架默认的process.env环境变量都是在构建阶段被静态替换为固定字符串的，打包后的静态代码中不存在process.env这个运行时对象，而JBoss的System-Properties是服务端运行时的变量，和浏览器端运行的前端代码分属不同上下文，无法直接读取。

可行实现方案 #

方案1：JBoss服务端注入全局配置（推荐） #

你可以在JBoss侧开发一个极简单的动态JS接口，把需要的系统属性注入到浏览器全局变量中：

1. JBoss新增接口 /app-config.js，返回内容如下（代码中读取对应JBoss System-Properties赋值即可）：

window.APP_CONFIG = {
  RESOURCE: "你读取到的JBOSS_RESOURCE系统属性值"
}

2. 在前端项目的index.html的<head>标签最顶部引入这个JS：

<script src="/app-config.js"></script>

3. 改造你的业务代码即可：

const RESOURCE = process.env.NODE_ENV === 'production' ? window.APP_CONFIG.RESOURCE : process.env.DEV_RESOURCE
function exampleMethod(token) {
  return {
    url: `${RESOURCE}/login`,
    method: 'POST',
  }
}
export { exampleMethod }

方案2：部署阶段替换占位符 #

如果不想改动JBoss服务端逻辑，可以在打包时预留占位符，部署前完成替换：

1. 生产构建时，把生产环境的RESOURCE值写为固定占位符：

const RESOURCE = process.env.NODE_ENV === 'production' ? "__JBOSS_RESOURCE_PLACEHOLDER__" : process.env.DEV_RESOURCE

2. 编写部署脚本，在把前端静态资源放到JBoss的静态资源目录前，先读取JBoss对应的System-Properties值，把所有JS文件中的__JBOSS_RESOURCE_PLACEHOLDER__全局替换为实际值即可。

JBOSS环境变量截图参考 #

内容的提问来源于stack exchange，提问作者Mclain Arandia Cabais