Question

我正在使用Vue CLI开发应用程序。此应用程序是一个Web界面，必须与板上的Rest API进行通信。

因此，由于板子将移动，因此板子的IP将随着时间的流逝而变化，具体取决于我在哪里。

这是我项目的当前树：

IP配置包含在Settings.js文件中：

export const Settings = {
    // Server configuration
    SERVER_IP: '127.0.0.1',
    SERVER_PORT: '9000',

    SERVER_PROTOCOL: 'http', // http or https

    // Website configuration
    DEBUG_MODE: true
};

在我的文件中，我使用以下语句导入此IP：

import {Settings} from '../../Settings'
const ip = Settings.SERVER_IP;

// Do stuff

这很好。但是问题是：当IP更改时，我必须重新编译所有内容。因为Settings.js是与其他JS文件一起编译的。

因此，我想知道是否有一种方法可以将配置文件保留在dist /目录中，并在执行期间由我的JS应用程序读取。因此，每次应用服务器IP更改时，我都不必重新编译所有内容。

请为您提供帮助：）

Answer 1

我针对Vue的解决方案基于solution for Angular。

您可以拥有完全像后端开发人员使用的环境变量。

但是区别在于，在服务器内部执行的后端代码，而前端代码只不过是您以静态方式撤出的磁盘上的文件，而它们甚至没有机会在撤消之前运行并检查env vars。

但是您的代码正在浏览器中执行。因此，这是拥有环境的理想且唯一的适当场所。

但是，您必须根据后端环境事先准备好该环境。

这是计划：

您从编译中排除了设置文件（请参见下文）。
在运行Vue应用之前，您的设置文件会“构建”环境。
从您的代码中使用该环境，也可以在运行时更新此环境。

这是您的最终代码结构：

root_project_dir:
├─> cfg
│   └── settings.js
├─> public
│   ├── favicon.ico
│   └── index.html
├─> src
│   ├── App.vue
│   ├─> assets
│   │   └── logo.png
│   ├─> components
│   ├─> layouts
│   ├── main.js
│   ├─> plugins
│   ├─> router
│   ├─> store
│   └─> views
└── vue.config.js

创建设置文件cfg / settings.js：

/*
This file goes as an asset without any of compilation even after build process.
Thus, it can be replaced in a runtime by different file in another environment.

Example for Docker:
  docker run -v ./local_cfg_dir:cfg image:tag
*/

(function(window) {
  window.__env = window.__env || {};

  window.__env.api = {
    "url": "http://127.0.0.1:8000",
    "timeout": 80000
  };
  window.__env.captcha = {
    "enabled": true,
    "key": "Mee1ieth1IeR8aezeiwi0cai8quahy"
  };
  window.__env.rollbar = {
    "enabled": true,
    "token": "zieriu1Saip5Soiquie6zoo7shae0o"
  };
  window.__env.debug = true;
})(this);

在{strong> vue.config.js 的 npm运行构建阶段为Webpack Copy plugin提供复制cfg文件的指令（您不能更改此名称）：

module.exports = {
  chainWebpack: config => {
    config.plugin("copy").tap(([pathConfigs]) => {
      pathConfigs.unshift({
        from: "cfg",
        to: "cfg"
      });
      return [pathConfigs]})
  },
  transpileDependencies: ["vuetify"]
};

检查生成的webpack配置并找到已应用的配置（在输出的底部）：

vue inspect

现在，当您构建项目时，您将在结果目录中看到它：

dist
 ├─> cfg
 │   └── settings.js
 ├─> css
 │   ├── app.06b1fea6.css
 │   └── chunk-1f2efba6.a298b841.css
 ├── favicon.ico
 ├─> img
 │   └── logo.09e0e4e1.png
 ├── index.html
 └─> js
     ├── app.8fc75c19.js
     ├── app.8fc75c19.js.map
     └── chunk-vendors.1ab49693.js.map

因此，您可以在同一窗口中运行应用之前，先在 public / index.html 中运行此设置：

  <body>
    <script src="/cfg/settings.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

现在您可以在窗口中找到它了

从代码中的任何位置，您都可以访问此环境：

Vue.use(VueReCaptcha, { siteKey: window.__env.captcha.key })

边注：

如果要与“ DevOps兼容”，则需要在嵌套目录（本例中为CFG）中进行设置。这样就可以在Kubernetes / Swarm中进行挂载，而不会覆盖dist的整个目录。

Answer 2

您事先知道IP地址的完整列表吗？如果是这样，您可以创建一个基于任何时间/位置逻辑返回正确IP的函数。

否则，您可以尝试将设置文件移动到公用文件夹，将其添加到.gitignore文件中，并确保在public / index.html中对其进行引用。现在它将位于已编译的Vue应用程序外部，并且可以从Vue内部作为全局设置变量进行访问。

因此，您将引用import {Settings} from '../../Settings'

而不是window.Settings

例如const ip = window.Settings.SERVER_IP;

这样，您可以直接编辑设置，而不必每次都重新编译。

Answer 3

您可以在公共目录中创建config.json文件，然后在主js中获取并加载配置文件。现在，您的dist使用此config.json创建。

fetch('/config.json').then(res => res.json()).then(config => {
     .......
})

Vue CLI-编译后将配置文件保留为外部

3 个答案: