在运行时将环境变量传递给 Vue 应用程序

本文介绍了在运行时将环境变量传递给 Vue 应用程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何访问 Vue 中的环境变量，这些变量是在运行时而不是在构建期间传递给容器的?

堆栈如下:

• VueCLI 3.0.5
• 码头工人
• Kubernetes

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

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

• 创建 Kubernetes ConfigMap(我做对了)
• 在运行部署 yaml 文件时将 ConfigMap 值传递给 K8s pod env 变量(我做对了)
• 从上面创建的环境变量中读取，例如.VUE_APP_MyURL 并在我的 Vue 应用程序中使用该值执行某些操作(我没有做对)

我在 helloworld.vue 中尝试了以下内容:

{{displayURL}}<p>Hello World</p>

<脚本>导出默认{数据() {返回 {显示网址:"}},安装(){console.log("检查 1")this.displayURL=process.env.VUE_APP_ENV_MyURLconsole.log(process.env.VUE_APP_ENV_MyURL)控制台日志(检查3")}}

我返回未定义"在控制台日志中，在 helloworld 页面上没有显示任何内容.

我还尝试将值传递到 vue.config 文件并从那里读取它.相同的未定义"结果在 console.log

{{displayURL}}<p>Hello World</p>

<脚本>const vueconfig = require('../../vue.config');导出默认{数据() {返回 {显示网址:"}},安装(){控制台日志(检查1")this.displayURL=vueconfig.VUE_APP_MyURLconsole.log(vueconfig.VUE_APP_MyURL)console.log(检查 3")}}

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 = (() => {返回 {"VUE_APP_ENV_MyURL": "...",};})();

现在确保您的脚本被排除在缩小之外.为此，请使用以下内容创建一个文件 vue.config.js，以保留我们的配置文件.

const path = require("path");模块.出口 = {公共路径:'/'，配置Webpack:{模块: {规则: [{测试:/config.*config.js$/,用: [{加载器:'文件加载器'，选项: {名称:'config.js'},}]}]}}}

在您的 index.html 中，添加一个脚本块以手动加载配置文件.请注意，配置文件将不存在，因为我们刚刚将其排除在外.稍后，我们将从 ConfigMap 将其挂载到我们的容器中.在本例中，我们假设将其挂载到与 HTML 文档相同的目录中.

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

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

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

apiVersion: v1种类:ConfigMap元数据:...数据:config.js: |var config = (() => {返回 {"VUE_APP_ENV_MyURL": "...",};})();

在您的部署中引用配置映射.这会将配置映射作为文件安装到您的容器中.mountPath 已经包含了我们缩小后的 index.html.我们挂载之前引用的配置文件.

apiVersion: apps/v1种类:部署元数据:...规格:...模板:...规格:卷:- 名称:配置卷配置映射:姓名: ...容器:- ...卷挂载:- 名称:配置卷挂载路径:/usr/share/nginx/html/config.js子路径:config.js

现在您可以访问位于 /config.js 的配置文件，您应该会看到您放入 ConfigMap 条目的确切内容.您的 HTML 文档会在加载其余缩小的 Vue.js 代码时加载该配置映射.瞧！

How can I access environment variables in Vue, that are passed to the container at runtime and not during the build?

Stack is as follows:

• VueCLI 3.0.5
• Docker
• Kubernetes

There are suggested solutions on stackoverflow and elsewhere to use .env file to pass variables (and using mode) but that's at build-time and gets baked into the docker image.

I would like to pass the variable into Vue at run-time as follows:

• Create Kubernetes ConfigMap (I get this right)
• Pass ConfigMap value into K8s pod env variable when running deployment yaml file (I get this right)
• Read from env variable created above eg. VUE_APP_MyURL and do something with that value in my Vue App (I DO NOT get this right)

I've tried the following in 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>

I get back "undefined" in the console log and nothing showing on the helloworld page.

I've also tried passing the value into a vue.config file and reading it from there. Same "undefined" result in 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>

With vue.config looking like this:

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

If I hardcode a value into VUE_APP_MyURL in the vue.config file it shows successfully on the helloworld page.

VUE_APP_ENV_MyURL is successfully populated with the correct value when I interrogate it: kubectl describe pod

process.env.VUE_APP_MyURL doesn't seem to successfully retrieve the value.

For what it is worth... I am able to use process.env.VUE_APP_3rdURL successfully to pass values into a Node.js app at runtime.

解决方案

Create a file config.js with your desired configuration. We will use that later to create a config map that we deploy to Kubernetes. Put it into your your Vue.js project where your other JavaScript files are. Although we will exclude it later from minification, it is useful to have it there so that IDE tooling works with it.

const config = (() => { return { "VUE_APP_ENV_MyURL": "...", }; })();

Now make sure that your script is excluded from minification. To do that, create a file vue.config.js with the following content that preserves our config file.

const path = require("path"); module.exports = { publicPath: '/', configureWebpack: { module: { rules: [ { test: /config.*config.js$/, use: [ { loader: 'file-loader', options: { name: 'config.js' }, } ] } ] } } }

In your index.html, add a script block to load the config file manually. Note that the config file won't be there as we just excluded it. Later, we will mount it from a ConfigMap into our container. In this example, we assume that we will mount it into the same directory as our HTML document.

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

Change your code to use our runtime config:

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

In Kubernetes, create a config map that uses the content your config file. Of course, you wanna read the content from your config file.

apiVersion: v1 kind: ConfigMap metadata: ... data: config.js: | var config = (() => { return { "VUE_APP_ENV_MyURL": "...", }; })();

Reference the config map in your deployment. This mounts the config map as a file into your container. The mountPath Already contains our minified index.html. We mount the config file that we referenced before.

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

Now you can access the config file at <Base URL>/config.js and you should see the exact content that you put into the ConfigMap entry. Your HTML document loads that config map as it loads the rest of your minified Vue.js code. Voila!