Vue.js 排除设置文件被捆绑

Posted 2023-02-22

【中文标题】Vue.js 排除设置文件被捆绑

【英文标题】：Vue.js exclude settings file from being bundled

【发布时间】：2017-09-11 16:39:07

【问题描述】：

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

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

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

如何防止文件在生产版本中被缩小/捆绑，以便我可以更改它并且下次访问应用程序时将使用更新的文件（无需再次构建它）？

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

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

我知道通过requireing 它，webpack 会将它捆绑为一个模块，但我怎样才能将它包含在我的应用程序中，以便设置文件在生产中仍然是一个分隔文件构建我可以编辑的。

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

【参考方案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";

---

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

【讨论】：

感谢您的回复，我想我会采用简单的方法并使用 externals 功能将我的设置简单地包含为定义全局 APP_SETTINGS 变量的 settings.js 文件。跨度>

最适合您要求的就是最佳选择。如果您要定义一个全局变量，可能值得使用 object.defineProperties 来利用属性描述符，尤其是 writable （默认为 false） 。这将防止用户使用分配运算符更改值，而不是像您期望的那样在文件中更改它。这里有一个简单的例子来说明这一点：jsfiddle.

随时克里斯蒂:)