在运行时将环境变量传递到 Vue 应用程序

如何访问 Vue 中的环境变量，这些变量在运行时而不是在构建期间传递给容器？

堆栈如下：

• Vue CLI 3.0.5
• Docker
• 库伯内斯

stackoverflow 和其他地方建议使用 .env 文件传递​​变量（和使用模式）的解决方案，但这是在构建时并被烘焙到 docker 映像中。

我想在运行时将变量传递到 Vue 中，如下所示：

• 创建 Kubernetes ConfigMap（我是对的）
• 运行部署 yaml 文件时将 ConfigMap 值传递到 K8s pod env 变量（我明白了）
• 从上面创建的 env 变量读取，例如。 VUE_APP_MyURL 并在我的 Vue 应用程序中使用该值执行某些操作（我没有做对）

我在 helloworld.vue 中尝试了以下操作：

<template>
<div>{{displayURL}}
  <p>Hello World</p>
</div>
</template>
<script>
export default {  
    data() {
        return {
            displayURL: ""
        }
    },
    mounted() {
        console.log("check 1")
        this.displayURL=process.env.VUE_APP_ENV_MyURL
        console.log(process.env.VUE_APP_ENV_MyURL)
        console.log("check 3")
    }
}
</script>

我在控制台日志中返回“未定义”，并且 helloworld 页面上没有显示任何内容。

我还尝试将值传递到 vue.config 文件并从那里读取它。 console.log 中出现相同的“未定义”结果

<template>
<div>{{displayURL}}
  <p>Hello World</p>
</div>
</template>
<script>
const vueconfig = require('../../vue.config');
export default {  
    data() {
        return {
            displayURL: ""
        }
    },
    mounted() {
        console.log("check 1")
        this.displayURL=vueconfig.VUE_APP_MyURL
        console.log(vueconfig.VUE_APP_MyURL)
        console.log("check 3")
    }
}
</script>

vue.config 看起来像这样：

module.exports = {
    VUE_APP_MyURL: process.env.VUE_APP_ENV_MyURL
}

如果我将一个值硬编码到 vue.config 文件中的 VUE_APP_MyURL 中，它将成功显示在 helloworld 页面上。

当我询问 VUE_APP_ENV_MyURL 时，它已成功填充正确的值：kubectl描述pod

process.env.VUE_APP_MyURL 似乎没有成功检索该值。

对于它的价值...我能够成功使用 process.env.VUE_APP_3rdURL 在运行时将值传递到 Node.js 应用程序。

创建文件config.js与您想要的配置。稍后我们将使用它来创建部署到 Kubernetes 的配置映射。将其放入其他 JavaScript 文件所在的 Vue.js 项目中。尽管我们稍后会将其排除在缩小之外，但将其放在那里很有用，以便 IDE 工具可以使用它。

const config = (() => {
  return {
    "VUE_APP_ENV_MyURL": "...",
  };
})();

现在确保您的脚本被排除在缩小之外。为此，请创建一个包含以下内容的文件 vue.config.js 来保留我们的配置文件。

const path = require("path");
module.exports = {
  publicPath: '/',
  configureWebpack: {
    module: {
      rules: [
        {
          test: /config.*config\.js$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'config.js'
              },
            }
          ]
        }
      ]
    }
  }
}

在您的index.html 中，添加一个脚本块来手动加载配置文件。请注意，配置文件不会在那里，因为我们刚刚排除了它。稍后，我们将从ConfigMap进入我们的容器。在此示例中，我们假设将其安装到与 HTML 文档相同的目录中。

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

更改您的代码以使用我们的运行时配置：

this.displayURL = config.VUE_APP_ENV_MyURL || process.env.VUE_APP_ENV_MyURL 

在 Kubernetes 中，创建一个使用配置文件内容的配置映射。当然，您想从配置文件中读取内容。

apiVersion: v1
kind: ConfigMap
metadata:
  ...
data:
  config.js: |
    var config = (() => {
      return {
        "VUE_APP_ENV_MyURL": "...",
      };
    })();

在您的部署中引用配置映射。这会将配置映射作为文件安装到容器中。这mountPath已经包含我们缩小的index.html。我们挂载之前引用的配置文件。

apiVersion: apps/v1
kind: Deployment
metadata:
  ...
spec:
  ...
  template:
    ...
    spec:
      volumes:
        - name: config-volume
          configMap:
            name: ...
      containers:
        - ...
          volumeMounts:
                - name: config-volume
                  mountPath: /usr/share/nginx/html/config.js
                  subPath: config.js

现在您可以访问配置文件<Base URL>/config.js您应该会看到放入 ConfigMap 条目中的确切内容。您的 HTML 文档在加载缩小的 Vue.js 代码的其余部分时加载该配置映射。瞧！