极客观点
项目管理
HarmonyOS
我如何访问 Vue 中的环境变量，这些变量是在运行时而不是在构建期间传递给容器的？
堆栈如下：
- VueCLI 3.0.5
- 码头工人
- 库伯内斯
在 stackoverflow 和其他地方有建议的解决方案使用 .env 文件传递变量（和使用模式），但那是在构建时并被烘焙到 docker 图像中。
我想在运行时将变量传递给 Vue，如下所示：
- 创建 Kubernetes ConfigMap（我做对了）
- 运行部署 yaml 文件时将 ConfigMap 值传递到 K8s pod 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 describe pod
process.env.VUE_APP_MyURL 似乎没有成功检索到该值。
对于它的价值……我能够在运行时成功地使用 process.env.VUE_APP_3rdURL 将值传递到 Node.js 应用程序。
原文由 Johann 发布，翻译遵循 CC BY-SA 4.0 许可协议
使用所需的配置创建一个文件
config.js。稍后我们将使用它来创建我们部署到 Kubernetes 的配置映射。将它放入其他 JavaScript 文件所在的 Vue.js 项目中。虽然我们稍后会将其从缩小中排除，但将其放在那里很有用，这样 IDE 工具就可以使用它。现在确保您的脚本已从缩小中排除。为此，请创建一个包含以下内容的文件 vue.config.js 以保留我们的配置文件。
在您的 index.html 中，添加一个脚本块以手动加载配置文件。请注意，配置文件不会存在，因为我们刚刚将其排除在外。稍后，我们将把它从
ConfigMap挂载到我们的容器中。在这个例子中，我们假设我们将把它挂载到与我们的 HTML 文档相同的目录中。更改您的代码以使用我们的运行时配置：
在 Kubernetes 中，创建一个使用配置文件内容的配置映射。当然，您想从配置文件中读取内容。
在您的部署中引用配置映射。这会将配置映射作为文件安装到您的容器中。
mountPath已经包含我们缩小的 index.html。我们挂载之前引用的配置文件。现在您可以在
<Base URL>/config.js访问配置文件，您应该会看到您放入 ConfigMap 条目的确切内容。您的 HTML 文档会在加载剩余的精简 Vue.js 代码时加载该配置映射。瞧！