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

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

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

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

如何防止文件在生产版本中被缩小/打包,以便我可以对其进行更改,并且下次访问该应用程序时将使用更新的文件(而无需再次构建它)？

在我的应用程序中,我通过require使用此文件：

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

我了解,通过要求它,webpack会将其捆绑为模块,但是如何将其包含在我的应用程序中,这样设置文件仍将是我可以编辑的生产版本中的独立文件.

是否有更好的格式/方式来存储这些设置(以便可以在生产中对其进行编辑而无需重新构建)？

解决方法:

您可以在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";

使用这种方法,您可以根据需要创建和使用尽可能多的设置文件.

标签：webpack,vue-js,application-settings,json,javascript
来源： https://codeday.me/bug/20191111/2020167.html