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

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 文件，生成的 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