Передача переменной среды в приложение Vue во время выполнения

Question

Как получить доступ к переменным среды в Vue, которые передаются в контейнер во время выполнения, а не во время сборки?

Стек выглядит следующим образом:

• VueCLI 3.0.5
• Docker
• Kubernetes

Предлагаются решения для stackoverflow и в других местах для использования файла .env для передачи переменных (и использования режима), но это во время сборки и запекается в образ докера.

Я хотел бы передать переменную в Vue во время выполнения следующим образом:

• Создание Kubernetes ConfigMap (я правильно понял)
• Передача значения ConfigMap в переменную env Kods pod при запуске файла развертывания yaml (я правильно понял)
• Чтение из созданной выше переменной env, например. VUE_APP_MyURL и сделайте что-нибудь с этим значением в моем приложении Vue (я НЕ правильно понимаю)

Я попробовал следующее в 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>

Я возвращаю "undefined" в журнале консоли и ничего не отображается на странице 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 выглядит так:

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

Если я жестко закодировал значение в VUE_APP_MyURL в файле vue.config, оно будет успешно отображено на странице helloworld.

VUE_APP_ENV_MyURL успешно заполняется правильным значением, когда я его опрашиваю: kubectl description pod

process.env.VUE_APP_MyURL не может успешно получить значение.

Для чего это стоит ... Я могу успешно использовать process.env.VUE_APP_3rdURL для передачи значений в приложение Node.js во время выполнения.

Answer 1

Создайте файл config.js с нужной вам конфигурацией:

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 добавьте блок скрипта для ручной загрузки файла:

`<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": "...",
      };
    })();

... и используйте ее в своем развертывании:

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

Answer 2

У меня была та же проблема в моем текущем проекте, и я обнаружил, что в данный момент невозможно получить доступ к переменным среды, поэтому я в итоге решил создать файлы .env или локальные переменные среды, которые, как вы сказали, , используются во время сборки.