Vue CLI - 编译后将配置文件保留为外部 [英] Vue CLI - Keep config file as external after compilation

问题描述

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

所以，因为棋盘会移动，棋盘的 IP 会随着时间的推移而改变，这取决于我在哪里.

这是我的项目当前树:

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

export const 设置 = {//服务器配置SERVER_IP: '127.0.0.1',SERVER_PORT: '9000',SERVER_PROTOCOL: 'http',//http 或 https//网站配置DEBUG_MODE:真};

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

从 '../../Settings' 导入 {Settings}const ip = Settings.SERVER_IP;//做东西

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

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

你的帮助:)

解决方案

我的 Vue 解决方案基于

并且可以从代码的任何位置访问此环境:

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

---

旁注:

如果您想与 DevOps 兼容"您需要在嵌套目录中进行设置(在我们的示例中为 cfg).这将提供在 Kubernetes/Swarm 中进行挂载的能力，而不会覆盖整个 dist 目录.

I'm developing an application with Vue CLI. This application is a web interface which will have to communicate with a Rest API on a board.

So, because the board will move, the IP of the board will change over time depending on where I am.

This is my project current tree :

The IP configuration is contained in the Settings.js file :

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
};

And in my files, I import this IP with the following statement :

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

// Do stuff

This works fine. But the problem is: I have to recompile everything when the IP change. Because Settings.js is compiled with other JS files.

So, I would like to know if there is a way to have a config file which will remain in the dist/ directory and will be read by my JS application during execution. So I will not have to recompile everything each time my application server IP change.

Ty for your help :)

解决方案

My solution for Vue is based on the solution for Angular.

You can have environment variables exactly like backend developers use.

But the difference is that backend code is executed inside the server while frontend code is nothing but files on the disk that you withdraw as static ones without giving them even a chance to run and check env vars before being withdrawn.

But your code is being executed inside the browser. So this is the ideal and the only proper place to have an env.

However, you have to prepare this env beforehand - according to your backend env.

Here is the plan:

1. You exclude from compilation your settings file (see below).
2. Your settings file "constructs" the env before you run the Vue app.
3. From your code you use that env and, also, you can update this env in runtime.

So here is your final code structure:

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

Create settings file 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);

Provide Webpack Copy plugin with the instruction to copy cfg files during npm run build stage in vue.config.js (you can't change this name):

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

Check the resultant webpack config and find it was applied (at the bottom of the output):

vue inspect

Now, when you build the project you will see it in the resultant dir:

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

So you can run this setup in public/index.html before you run app in the same window:

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

Now you have it in your window:

And from any place in the code you can reach this env:

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

---

Sidenote:

If you want to be "DevOps-compatible" you need to have a settings in a nested directory (cfg in our example). This will give an ability to make mounts in Kubernetes/Swarm without overwriting entire directory of dist.

这篇关于Vue CLI - 编译后将配置文件保留为外部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！