Vue.js从捆绑中排除设置文件 [英] Vue.js exclude settings file from being bundled

问题描述

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

I am using the vue-webpack template and I have created a settings.json file to store environment variables that should be changed when installing the script.

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

My settings.json (just store the absolute path to the API server):

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

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

How can I keep the file from being minified/bundled in the production version such that I can change it and the updated file will be used next time the app is accessed (without having to build it again) ?

在我的应用中，我通过require使用此文件:

In my app I use this file via require:

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

我了解到，通过require打包，webpack会将其打包为模块，但是如何将其包含在我的应用程序中，使得设置文件在生产环境中仍然是分隔的文件我可以编辑的版本.

I understand that by requireing it webpack will bundle it as a module, but how can I include it in my app such that the settings file will still be a separated file in the production build that I can edit.

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

Is there a better format/way to store those settings (so that they can be edited in production without re-building) ?

推荐答案

您可以在 externals 配置.

You can define those settings in an object that can be referenced in the externals configuration in webpack.config.js.

外部配置选项提供了一种排除 输出包中的依赖项.而是创建的包 依靠这种依赖关系存在于消费者的环境中.

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是包含要处理的环境变量的全局变量.

Where appSettings is a global variable containing the environment variables you want to manipulate.

或者，如果您不喜欢在全局对象中公开设置的方法，则可以执行以下操作:

Alternatively, if you do not like that method that exposes the settings in the global object, you can do the following:

使用默认设置导出变量，该变量将包含在webpack捆绑包中.

Export a variable with the default settings, which will be included in webpack bundle.

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;

然后，您可以要求或导入此变量，并按如下方式使用它:

You can then require or import this variable and use it like so:

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

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

现在您已经启动并运行了默认设置，我们将创建另一个包含自定义设置的文件.

Now that you have your default settings up and running, we will create another file containing the custom settings.

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

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

appSettings.settings["production"] = appProductionSettings;

您需要做的最后一件事是处理要使用的设置.我尚未使用vue.js，但希望这会引导您朝正确的方向前进:

The last thing you need to do is handle which settings you want to use. I have not used vue.js yet, but hopefully this will lead you in the right direction:

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

---

通过这种方法，您可以创建和使用任意数量的设置文件.

---

With this method you can create and use as many settings files as you want.

这篇关于Vue.js从捆绑中排除设置文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！