docker - 在运行时将环境变量传递给 Vue 应用程序
问题描述
如何访问 Vue 中的环境变量,这些变量在运行时而不是在构建期间传递给容器?
堆栈如下:
- VueCLI 3.0.5
- 码头工人
- Kubernetes
在 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 应用程序。
解决方案
config.js
使用所需的配置创建一个文件。稍后我们将使用它来创建我们部署到 Kubernetes 的配置映射。将其放入您的 Vue.js 项目中,其他 JavaScript 文件所在的位置。虽然我们稍后会从缩小中排除它,但将它放在那里是很有用的,以便 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 中,添加一个脚本块以手动加载配置文件。请注意,配置文件将不存在,因为我们只是将其排除在外。稍后,我们会将它从 a 挂载ConfigMap
到我们的容器中。在这个例子中,我们假设我们将把它挂载到与我们的 HTML 文档相同的目录中。
<script src="<%= BASE_URL %>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": "...",
};
})();
在部署中引用配置映射。这会将配置映射作为文件安装到您的容器中。已经包含我们缩小的mountPath
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 代码时加载该配置映射。瞧!
推荐阅读
- scala - 设置不可变字段以供以后使用
- javascript - 单击 iframe 中的按钮 - pyppeteer
- angular - 组件之间的展开/折叠功能
- javascript - 如何在没有括号的情况下执行 JS 函数?
- gitlab-ci - 无法让最简单的 yml 参考标记示例工作
- google-cloud-platform - 谷歌计算引擎 WHM 根密码
- wordpress - 在 Wordpress 中使用 ACF 创建 3 列布局
- react-native - 如何在 React-Native 模态中定义 Stack Navigator?
- node.js - 尝试将大型视频文件从 Next.js 应用程序上传到 Cloudflare 时出现 504?
- android - 是否可以在 jetpack Compose 中单击lazyRow 中的项目来启动应用程序?