小编Joh*_*ann的帖子

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

堆栈如下:

• VueCLI 3.0.5
• 搬运工人
• Kubernetes

有关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>

我在控制台日志中找回"undefined",并且在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 …