在运行时将环境变量传递到Vue App中 [英] Pass environment variable into a Vue App at runtime

问题描述

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

How can I access environment variables in Vue, that are passed to the container at runtime and not during the build?

堆栈如下:

• VueCLI 3.0.5
• Docker
• Kubernetes

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

There are suggested solutions on stackoverflow and elsewhere to use .env file to pass variables (and using mode) but that's at build-time and gets baked into the docker image.

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

I would like to pass the variable into Vue at run-time as follows:

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

我已经在helloworld.vue中尝试了以下操作:

I've tried the following in 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页面上没有任何显示.

I get back "undefined" in the console log and nothing showing on the helloworld page.

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

I've also tried passing the value into a vue.config file and reading it from there. Same "undefined" result in 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看起来像这样:

With vue.config looking like this:

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

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

If I hardcode a value into VUE_APP_MyURL in the vue.config file it shows successfully on the helloworld page.

当我询问VUE_APP_ENV_MyURL时，它已成功填充了正确的值:kubectl describe pod

VUE_APP_ENV_MyURL is successfully populated with the correct value when I interrogate it: kubectl describe pod

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

process.env.VUE_APP_MyURL doesn't seem to successfully retrieve the value.

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

For what it is worth... I am able to use process.env.VUE_APP_3rdURL successfully to pass values into a Node.js app at runtime.

推荐答案

我在当前项目中遇到了同样的问题，发现目前无法在运行时访问环境变量，所以我得出了解决方案正如您所说，创建.env文件或本地环境变量的过程.

I had the same problem in my current project and found out that it is not possible to access environment variables at runtime at the moment so I end up with the solution of creating .env files or local environment variables that, as you said, are used at the build time.

这篇关于在运行时将环境变量传递到Vue App中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！