Question

我正在使用Vue.js和Webpack 2编写SPA。节点生态系统对我来说是一种相当新的体验。

我需要能够设置一些配置变量，最好是动态解析。在我看来，解决方案将涉及在应用程序加载时获取的配置文件。这个问题看起来相当普遍，但我没有设法谷歌这样的东西。

Webpack世界中是否有任何“标准”解决方案，或者至少是任何既定的良好实践？

Answer 1

假设您将配置变量存储在JSON文件config.json。

中

{
  "some": "123",
  "configs": "456",
  "here": "789"
}

在您的应用程序中需要带有file-loader的配置文件。 https://github.com/webpack-contrib/file-loader

// Require config file
// File-loader returns the public URL for your file required here
var configURL = require("file-loader!./config.json");

在初始化Vue应用程序之前，使用简单的XHR加载config.json。

// Create XHR
var configXHR = new XMLHttpRequest();
configXHR.open("GET", configURL, false);    // Synchronous request
configXHR.send();

// Response status check
if(configXHR.status == 200) {
  var configs = JSON.parse(configXHR.responseText);
  console.log(configs);
} else {
  throw "Unable to load config file";
}

// Bootstrap your Vue application below
// ...

Answer 2

最好动态解决

一个简单的解决方案可能依赖于<div id="base_price">4200</div> <div id="extra_price">100</div> <div id="total"></div>，它允许加载并动态更新导入的资源。此外，HMR将自动监视服务器上的文件，并在发生时在客户端发布更新。

经典流派 - https://webpack.js.org/concepts/hot-module-replacement/

Webpack + HMR

将配置添加到基于Webpack的SPA

2 个答案: