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

Question

我们如何设置代理URL来自config.json外部文件，例如.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 component:

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

outside of component

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

需要注意的一些事项： - 因为它不再是同一个bundle的一部分，配置包需要来自网络请求，这意味着响应是异步的，所以你不能做一个简单的赋值。这可能需要对代码进行不太重要的更改，因为在加载之前您将无法使用该值，因此依赖于它的任何其他代码都需要等待。 - 无论你在源代码中使用json或js文件，生成的webpack包都将是一个js文件并且几乎相同，尽管json版本稍微小一点

配置包看起来像这样

(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中的功能