Question

我们如何通过config.json外部文件设置代理URL，就像在.net应用程序中一样，我们通过web.config进行配置。我正在使用vue-cli样板（Vue2 + Webpack）+ vuex + axios。

我为此做了一些工作，但无济于事，我导入config.json并使用其中的配置数据，但是在构建webpack之后，在output.min.js中包含了该配置文件

当前，我在运行生产服务器或开发服务器的构建之前手动更改代码中的服务器URL，但是需要单独使用config.json文件，这样我才能更改代理产品上的配置文件中的URL。

Answer 1

您可以使用带有webpackChunkName注释的webpack代码拆分。这将创建一个单独的块，然后在构建后可以更轻松地对其进行更改。

以下是在vue组件中提供该代码的代码

config.json：

{
  "abc": 123,
  "def": 123
}

vue组件：

export default {
  name: 'app',
  data: function () {
    return {
      config: null
    }
  },
  created() {
    import (/* webpackChunkName: "config", webpackMode: "lazy-once" */ "./config.json").then(r => this.config = r.default);
  }
}

组件外部

let config;
import(/* webpackChunkName: "config" */ './config.js')
  .then(r => {config : r.default})
  .then(/* do stuff with config */);

一些注意事项： -由于配置包不再属于同一捆绑包，因此配置捆绑包将需要来自网络请求，这意味着响应是异步，因此您无法进行简单的分配。这可能需要对代码进行不小的更改，因为在加载该值之前您将无法使用该值，因此依赖于该值的任何其他代码都需要等待。 -无论您使用json还是源代码中的js文件，尽管json版本略小，但最终的webpack捆绑包都是js文件，并且几乎相同。

配置包看起来像这样

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["config"],{"7dc5":function(n){n.exports={abc:123,def:123}}}]);
//# sourceMappingURL=config.26910bd8.js.map

其中{abc:123,def:123}是现在应该易于修改的数据部分

资源：

webpack代码拆分文档：https://webpack.js.org/guides/code-splitting/
延迟加载，在vue https://router.vuejs.org/guide/advanced/lazy-loading.html#grouping-components-in-the-same-chunk中显示功能

如何从vue.config.json中的外部config.json文件设置代理URL

1 个答案:

config.json：

vue组件：

组件外部