个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 18:16:51 28 4
gpt4 key购买 nike

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

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

这是我的项目当前树:

Project tree

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 更改时，我都不必重新编译所有内容。

泰为您提供帮助:)

最佳答案

我的 Vue 解决方案基于 solution for Angular .
您可以拥有与后端开发人员使用的完全相同的环境变量。
但不同之处在于后端代码在服务器内部执行，而前端代码只是磁盘上的文件，您可以将其作为静态文件撤回，而在撤回之前甚至没有机会运行和检查环境变量。
但是您的代码正在浏览器中执行。所以这是拥有环境的理想和唯一合适的地方。
但是，您必须事先准备此 env - 根据您的后端 env。
这是计划:

  • 您从编译中排除您的设置文件(见下文)。
  • 在运行 Vue 应用程序之前，您的设置文件“构造”了 env。
  • 从您的代码中，您可以使用该环境，此外，您还可以在运行时更新该环境。

    • 所以这是你的最终代码结构: 
    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
    创 build 置文件 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带有在 期间复制 cfg 文件的说明npm 运行构建 舞台在 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 在同一窗口中运行应用程序之前: 
      <body>
        <script src="/cfg/settings.js"></script>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    现在你的窗口中有它:
    enter image description here
    从代码中的任何地方你都可以访问这个环境: 
    Vue.use(VueReCaptcha, { siteKey: window.__env.captcha.key })

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

    关于vue.js - Vue CLI - 编译后将配置文件保留为外部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54004759/

    28 4 0
    文章推荐： javascript - 位置感知移动浏览器
    文章推荐： c++ - 编写从C++应用程序链接的Delphi DLL:访问C++接口(interface)成员函数会导致访问冲突
    文章推荐： Delphi XE2 starter - 我有哪些数据库访问选项
    文章推荐： vb.net - 将 delphi 的 System.Copy 转换为 .net
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com