问题描述
如何在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中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!