在运行时将环境变量传递到Vue App中

Question

如何在Vue中访问在运行时而不是在构建过程中传递到容器的环境变量？

堆栈如下：

• VueCLI 3.0.5
• docker
• Kubernetes

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

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

• 创建Kubernetes ConfigMap（我正确了）
• 运行部署yaml文件时将ConfigMap值传递到K8s pod env变量中（我正确了）
• 从上面创建的env变量读取，例如。VUE_APP_MyURL并在我的Vue App中使用该值执行某项操作（我不正确）

我在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 describe pod

process.env.VUE_APP_MyURL似乎无法成功检索该值。

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

Answer 1

创建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="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": "...",
      };
    })();

在您的html" target="_blank">部署中引用配置映射。这会将配置映射作为文件安装到您的容器中。在mountPath已经包含了我们的minified的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代码。瞧！