Vue.js將設置文件排除在捆綁之外

Question

我使用的是vue-webpack模板，我創建了一個settings.json文件來存儲安裝腳本時應該更改的環境變量。

我的settings.json （只存儲API服務器的絕對路徑）：

{
  "apiURL": "//localhost/app/server/API"
}

如何防止文件在生產版本中被縮小/捆綁，以便我可以更改它，下次訪問應用程序時將使用更新的文件（無需再次構建）？

在我的應用程序中，我通過require使用此文件：

const SETTINGS = require('../settings.json');

據我所知，通過require它將webpack捆綁為一個模塊，但我如何將其包含在我的應用程序中，以便設置文件仍然是我可以編輯的生產版本中的單獨文件 。

是否有更好的格式/方式來存儲這些設置（以便可以在生產中編輯它們而無需重新構建）？

Answer 1

您可以在對象中定義這些設置，這些設置可以在webpack.config.js的externals配置中引用。

externals配置選項提供了一種從輸出包中排除依賴關系的方法。 相反，創建的捆綁包依賴於該依賴關系在消費者環境中的存在。

例：

externals: {
  appSettings: "appSettings",
  "window.appSettings": "appSettings"
}

appSettings是一個包含您想要操作的環境變量的全局變量。

---

或者，如果您不喜歡公開全局對象中的設置的方法，則可以執行以下操作：

使用默認設置導出變量，該變量將包含在webpack包中。

export var appSettings = {
  currentSettings: "",
  settings: {},
  getString: function(strName) {
    var sett = this.currentSettings ?
      this.settings[this.currentSettings] :
      appDefaultStrings;
    if (!sett || !sett[strName]) sett = appDefaultStrings;
    return sett[strName];
  },
  getSettings: function() { //Gets all available settings
    var res = [];
    res.push("");
    for (var key in this.settings) {
      res.push(key);
    }
    res.sort();
    return res;
  }
};

export var appDefaultStrings = {
  apiURL: "//localhost/app/server/API"
    //...
}
appSettings.settings["default"] = appDefaultStrings;

然后，您可以要求或導入此變量並使用它，如下所示：

import appSettings from "../path/to/appSettings";

appSettings.getString("apiURL"); //"//localhost/app/server/API"

現在您已啟動並運行默認設置，我們將創建包含自定義設置的另一個文件。

import appSettings from "../path/to/appSettings";

export var appProductionSettings = {
  apiUrl: "http://example.com"
    //...
}

appSettings.settings["production"] = appProductionSettings;

您需要做的最后一件事是處理您要使用的設置。 我還沒有使用過vue.js，但希望這會引導你朝着正確的方向前進：

import appSettings from "../path/to/appSettings";

export class MyApp {
  constructor() {
    this.settingsValue = "";
  }
  get settings() {
    return this.settingsValue;
  }
  set settings(value) {
    this.settingsValue = value;
    appSettings.currentSettings = value;
  }
}

更改設置：

import "../path/to/productionSettings";

var app = new MyApp();

app.settings = "production";

---

使用此方法，您可以根據需要創建和使用任意數量的設置文件。