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

大佬教程收集整理的这篇文章主要介绍了在运行时将环境变量传递到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: v1
kind: ConfigMap
Metadata:
  ...
data:
  config.Js: |
    var config = (() => {
      return {
        "VUE_APP_ENV_MyURL": "...",
      };
    })();

在您的部署中引用配置映射。这会将配置映射作为文件安装到您的容器中。在@H_723_3@mountPath已经包含了我们的minifIEd的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代码。瞧！

解决方法

<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>

<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>

@H_723_3@module.exports = {
    VUE_APP_MyURL: process.env.VUE_APP_ENV_MyURL
}

大佬总结

以上是大佬教程为你收集整理的在运行时将环境变量传递到Vue App中全部内容，希望文章能够帮你解决在运行时将环境变量传递到Vue App中所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。