Vue.js 从捆绑中排除设置文件

Question

我正在使用 vue-webpack 模板，我创建了一个 settings.json 文件来存储安装脚本时应更改的环境变量。

我的settings.json（只存储API服务器的绝对路径）：

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

如何避免文件在生产版本中 minified/bundled 以便我可以更改它并且下次访问该应用程序时将使用更新的文件（无需重新构建）？

在我的应用程序中，我通过 require:

使用此文件

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

我知道通过 requireing webpack 会将其捆绑为一个模块，但我如何将其包含在我的应用程序中，以便设置文件仍然是一个 单独的文件 在我可以编辑的生产版本中。

是否有更好的 format/way 来存储这些设置（以便可以在生产中对其进行编辑而无需重新构建）？

Answer 1

您可以在 webpack.config.js 中的 externals 配置中引用的对象中定义这些设置。

The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's environment.

示例：

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

使用此方法，您可以创建和使用任意数量的设置文件。

Vue.js 从捆绑中排除设置文件

Vue.js exclude settings file from being bundled

javascript

json

application-settings

webpack

vue.js