如何在Quasar Vue3应用中通过OpenShift Secrets注入运行时环境变量

Quasar默认会在构建阶段把process.env变量打包进静态资源，导致无法读取容器启动时的动态环境变量。要实现OpenShift Secrets通过envFrom注入的变量在运行时生效，可按以下步骤操作：

1. 编写运行时环境变量读取脚本 #

在项目public目录下新建env-config.js文件，内容如下：

window.env = {};
// 筛选指定前缀的环境变量（比如以APP_开头），避免和全局属性冲突
Object.keys(window).forEach(key => {
  if (key.startsWith('APP_')) {
    window.env[key] = window[key];
  }
});

该脚本会在页面加载时，把容器注入的环境变量挂载到window.env对象中，供后续应用读取。

2. 在入口HTML中引入脚本 #

修改public/index.html，在<head>标签内添加：

<script src="<%= BASE_URL %>env-config.js"></script>

确保脚本在Vue应用初始化前执行，保证环境变量已就绪。

3. 封装全局环境变量读取工具 #

在src/utils目录下新建env.js：

export const getEnv = (key, defaultValue = null) => {
  return window.env?.[key] || defaultValue;
};

后续应用中统一通过这个工具函数读取变量，避免直接依赖window.env。

4. 业务代码中使用示例 #

在Vue组件或逻辑文件中：

import { getEnv } from 'src/utils/env';

// 获取OpenShift注入的环境变量
const apiBaseUrl = getEnv('APP_API_BASE_URL');
const authSecret = getEnv('APP_AUTH_SECRET');

5. OpenShift部署配置要点 #

• 建议给Secrets中的变量加上统一前缀（如APP_），避免和浏览器全局对象的内置属性冲突
• 部署时通过envFrom引用目标Secrets，确保容器启动时变量注入完成：

spec:
  containers:
    - name: quasar-app
      image: your-quasar-image:tag
      envFrom:
        - secretRef:
            name: your-app-secrets

原方案无效原因说明 #

• quasar.config.js中使用process.env属于构建时注入，变量会被硬编码进静态文件，无法读取容器启动时的动态值
• 浏览器环境不存在Node.js的process对象，直接调用process.env自然返回空值
• Quasar的dotenv插件仅处理构建阶段的.env文件，不支持运行时动态注入变量

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