在运行时将环境变量传递到Vue App中

在运行时将环境变量传递到Vue App中

创建

config.js

具有所需配置的文件。我们将在以后使用它来创建一个配置映射，并将其部署到Kubernetes。将其放入其他Javascript文件所在的Vue.js项目中。尽管稍后我们将其排除在最小化之外，但将其保留在此处很有用，以便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中，添加脚本块以手动加载配置文件。请注意，配置文件将不存在，因为我们只是将其排除在外。稍后，我们将其从中装入

ConfigMap

到我们的容器中。在此示例中，我们假设将其安装到与HTML文档相同的目录中。

<script src="config.js"></script>

更改代码以使用我们的运行时配置：

this.displayURL = config.VUE_APP_ENV_MyURL || process.env.VUE_APP_ENV_MyURL

在Kubernetes中，创建一个使用配置文件内容的配置映射。当然，您想从配置文件中读取内容。

apiVersion: v1kind: ConfigMapmetadata:  ...data:  config.js: |    var config = (() => {      return {        "VUE_APP_ENV_MyURL": "...",      };    })();

在您的部署中引用配置映射。这会将配置映射作为文件安装到您的容器中。在

mountPath

已经包含了我们的minified的index.html的。我们挂载我们之前引用的配置文件。

apiVersion: apps/v1kind: Deploymentmetadata:  ...spec:  ...  template:    ...    spec:      volumes:        - name: config-volume          configMap: name: ...      containers:        - ...          volumeMounts:     - name: config-volume       mountPath: /usr/share/nginx/html/config.js       subPath: config.js

现在，您可以在处访问配置文件，

<baseURL>/config.js

并且应该看到放入ConfigMap条目中的确切内容。您的HTML文档会加载该配置映射，同时会加载其余的缩小的Vue.js代码。瞧！