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

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

你提前知道完整的IP地址列表吗？如果是这样，您可以创建一个函数，根据任何 time/location 逻辑 returns 正确的 IP。

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

因此，您将引用 window.Settings

而不是 import {Settings} from '../../Settings'

例如const ip = window.Settings.SERVER_IP;

这样就可以直接编辑设置了，不用每次都重新编译。

Answer 2

您可以在 public 目录 中创建一个 config.json 文件，然后在主 js 中您可以 fetch它并加载配置文件。现在你的 dist 是用这个 config.json.

创建的

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

Answer 3

我的 Vue 解决方案基于 solution for Angular.

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

但区别在于后端代码是在服务器内部执行的，而前端代码只不过是磁盘上的文件，您将它们作为静态文件撤回，甚至没有机会运行并在之前检查环境变量正在撤回。

但是你的代码是在浏览器中执行的。所以这是拥有环境的理想且唯一合适的地方。

但是，你必须事先准备好这个环境——根据你的后端环境。

计划如下：

您从编译中排除了您的设置文件（见下文）。
您的设置文件在您运行 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);

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

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 中运行应用程序之前 window:

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

现在你的 window:

并且从代码中的任何地方你都可以到达这个环境：

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

旁注:

如果你想“与 DevOps 兼容”，你需要在嵌套目录中进行设置（在我们的示例中为 cfg）。这将提供在 Kubernetes/Swarm 中进行挂载的能力，而无需覆盖 dist.

的整个目录

Answer 4

使用 Melih Altıntaş 的（谢谢！！:)）但为了避免获取，我在 /public 文件夹中创建了一个 JavaScript 文件：

/public/config.js --> /dist/config.js

将其加载到 index.html 头部

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

并在我需要的任何后续 *.js 文件中使用了在 /public/config.js 中声明的变量（例如 main.js、mixins.js...）。

构建后，/dist/config.js 可以轻松修改，它的值仍然自动在应用程序中顺利使用（并重新编译 ;））。

也许这是一个愚蠢的解决方案，但它确实有效。完全按照我的需要去做（让客户轻松编辑某些值）。

再次感谢你，Melih！ :)

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

Vue CLI - Keep config file as external after compilation

webpack

vue.js

vuejs2

vue-cli

vue-cli-3