程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了在运行时将环境变量传递到Vue App中大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决在运行时将环境变量传递到Vue App中?

开发过程中遇到在运行时将环境变量传递到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_573_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代码。瞧!

解决方法

如何在Vue中访问在运行时而不是在构建过程中传递到容器的环境变量?

堆栈如下:

  • VueCLI 3.0.5
  • docker
  • Kubernetes

在stackoverflow和其他地方提出了建议的解决方案,以使用.env文件传递变量(并使用模式),但这是在构建时被烘焙到docker映像中的。

我想在运行时将变量传递给Vue,如下所示:

  • 创建Kubernetes ConfigMap(我正确了)
  • 运行部署yaml文件时将ConfigMap值传递到K8s pod env变量中(我正确了)
  • 从上面创建的env变量读取,例如。VUE_APP_MyURL并在我的Vue App中使用该值执行某项操作(我不正确)

我在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看起来像这样

@H_573_3@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似乎无法成功检索该值。

为了它的价值&Hellip;我能够在运行时成功使用process.env.VUE_APP_3rdURL将值传递到Node.js应用程序中。

大佬总结

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

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

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