时间戳

首页 > 解决方案 > 可配置的 vue 前端应用程序

javascript - 可配置的 vue 前端应用程序

问题描述

我正在开发一个使用后端 API 的 Vue 前端，这两个 API 都部署到同一个 kubernetes 集群。我想让 vue 前端应用程序可配置，这样我就可以在容器启动时而不是在构建时将地址分配给后端服务。

我一直在尝试按照 Hendriks 对这个线程的回答来做到这一点： 在运行时将环境变量传递给 Vue 应用程序

由于我缺乏 Node 和 Javascript 经验，我不明白以下内容：

  1. 文件应该放在文件结构的什么位置？
  2. 为什么 config.js 描述了一个函数，而不仅仅是export default { configObj: var }一个带有变量的对象？
  3. 如何在我的应用程序的其余部分通过 /config.js 访问 config.js 中的变量？我可以在浏览器中的 /config.js 中看到该文件，但导入不起作用。

我目前已经像这样放置文件：

/app
    /public
        index.html << I put the script tag in the head of this file.
        ...
    /src
        /config
            config.js
        main.js << setting axios.defaults.baseURL here. import config from '@/config/config.js' results in the str 'config.js'.
        ...
    vue.config.js

即使我知道我的后端服务 IP/地址不应该在生产中更改，但在构建之前设置这些值似乎是一种非常静态和手动的方法。在开发过程中，在 minikube 上本地运行应用程序和后端，快速等待长时间构建变得非常耗时。

非常感谢任何关于我如何实现这一点的见解，或者任何关于为什么我似乎无法让 Hendriks 提案发挥作用的见解。

标签： javascriptnode.jsvue.jskubernetesconfiguration

解决方案

请务必注意，您尝试做的事情与 node.js 没有任何关系。您的 Vue 应用程序的执行环境将是浏览器而不是节点（即使您使用节点提供服务）。这也是为什么你不能做export default你的配置，因为一些浏览器不会理解这一点。

但是，您可以使用以下方法使用 k8s 将配置获取到您的应用程序。创建一个 k8s 配置映射，其中将包含您的 config.js，例如：

apiVersion: v1
kind: ConfigMap
metadata:
    name: vue-config
data:
    config.js: |
        function config () {
            return { serverAddress: "https://example.com/api" };
        }

然后在您的 pod/deployment 中嵌入文件：

apiVersion: v1
kind: Pod
spec:
  containers:
    - name: your-vue-app
      image: your-vue-app:1.0.0
      volumeMounts:
      - name: config-volume
        mountPath: /app/public/config.js
  volumes:
    - name: config-volume
      configMap:
        name: vue-config

请注意，您将配置放在公共目录中。之后，您可以在加载 config.js 的索引中添加脚本标记。将配置作为一个函数很有用，因为您可以确保某种程度的不变性，而且我认为它看起来比全局配置 var 更好一些。

当您想使用配置时，您只需在配置中的任何位置调用 config 函数：

const conf = config();

推荐阅读