在 Vue 应用运行时传递环境变量：一份完整指南

在运行时将环境变量传递到 Vue 应用

引言

在容器运行时将环境变量传递到 Vue 中是一个常见的问题，尤其是在 Kubernetes 等容器编排平台中。本文将介绍如何使用 VueCLI、Docker 和 Kubernetes 来实现此目的，并提供详细的代码示例。

Kubernetes 设置

要将环境变量传递到 Vue，首先需要创建一个 ConfigMap 来存储这些变量。在 YAML 文件中定义 ConfigMap：

apiVersion: v1
kind: ConfigMap
metadata:
  name: my-env-vars
data:
  VUE_APP_MyURL: "https://example.com"

接下来，在运行部署 YAML 文件时，将 ConfigMap 值传递到 K8s pod 环境变量中。在 pod 模板中添加以下部分：

env:
- name: VUE_APP_ENV_MyURL
  valueFrom:
    configMapKeyRef:
      name: my-env-vars
      key: VUE_APP_MyURL

传递到 Vue

现在，你可以在 Vue 应用程序中读取通过环境变量传递的值。在 Vue 组件中，使用 mounted() 钩子来访问 process.env 对象：

<script>
export default {
    data() {
        return {
            displayURL: ""
        }
    },
    mounted() {
        this.displayURL = process.env.VUE_APP_MyURL
    }
}
</script>

其他方法

除了使用 process.env，你还可以使用 vue.config.js 文件来定义环境变量，然后在 Vue 组件中使用 require 加载它：

// vue.config.js
module.exports = {
    VUE_APP_MyURL: process.env.VUE_APP_ENV_MyURL
}

// Vue 组件
const vueconfig = require('../../vue.config');
this.displayURL = vueconfig.VUE_APP_MyURL

注意：

• 确保 VUE_APP_ 前缀用于环境变量名称，以便 Vue 可以识别它们。
• 在运行容器时，确保环境变量已正确设置。你可以使用 kubectl describe pod 命令进行检查。
• 请注意，硬编码环境变量值只适用于开发和测试目的，在生产环境中应避免使用。

常见问题解答

问：我无法访问环境变量，即使我已经遵循了上述步骤？
答： 检查你的 pod 环境变量是否正确配置。你还可以使用 console.log() 来检查 process.env 对象的内容。

问：是否存在其他方法来传递环境变量？
答： 是的，你可以使用 Dockerfile 或 Kubernetes 的 Secret，具体取决于你的具体用例。

问：如何在生产环境中安全地传递敏感环境变量？
答： 使用 Secret 来加密和存储敏感环境变量，以防止未经授权的访问。

问：我的环境变量被覆盖了，这是怎么回事？
答： 环境变量的覆盖可能是由于多个因素造成的，例如 pod 重新启动或用户错误。仔细检查你的配置。

问：我在 Vue 中使用环境变量有什么好处？
答： 通过使用环境变量，你可以动态地配置你的应用程序，根据不同的环境定制它的行为。这对于开发、测试和部署很有用。

结论

本文介绍了如何使用 VueCLI、Docker 和 Kubernetes 将环境变量传递到 Vue 中。通过遵循这些步骤，你可以提高应用程序的可配置性和灵活性，使其更容易适应不同的环境。