@jackiewongamu/proxy-dev

/**
 * 这个文件是vue-cli3创建的工程根目录下，vue.config.js配置文件，
 * 如果你使用原生webpack + vue，
 * 下面的属性也是你熟悉的，所以不必担心！
 */
const ProxyDev = require('@jackiewongamu/proxy-dev').ProxyDev;

module.exports = {
    devServer: {
        proxy: (
            /**
             * vue-cli 很好地封装了webpack配置信息，
             * 其中包括，兼容了本地开发时，处理因不遵循同源策略而引发的“跨域”问题的方式。
             * 但实践中，反馈了原始配置的易读性不高，多源配置时有些冗余代码，因此：
             * 		我写了这个类，用于开发时的编译环境，也兼容多源代理配置行为，
             *		方便写，也方便读懂。
             */
            new ProxyDev({
                /**
                 * 键值对形式：
                 * 		键为源（它通常可以是协议 + IP + 端口以及其他公共部分），
                 * 		值为应用服务具体的接口路径组成的数组。
                 */
                "http(s)://domain-a": [
                    /**
                     * 你可能已经注意到了这里有些不同，‘~’在这里的作用，
                     * 等价于原生写法里面的pathRewrite，并且，它是可选的。
                     * 所以：
                     * 		/application/api/path/get~/意味着：
                     *			识别到以/application/api/path/get开头的字符串，真正请求服务时，它被重写为/；
                     * 		/application/api/path/post~/another/path
                     *			识别到以/application/api/path/post开头的字符串，真正请求服务时，它被重写为/another/path。
                     */
                    "/application/api/path/get~/",
                    "/application/api/path/post~/another/path",
                    "/application/api/path/put",
                    "/application/api/path/delete",
                ],
                "http(s)://domain-b": [
                    "/application/api/path/get",
                    "/application/api/path/post",
                    "/application/api/path/put",
                    "/application/api/path/delete",
                ],
                /**
                 * ... ...
                 * 理论上，你可以无限地创建不同的源下的地址代理映射。
                 */
            })
            // 配置好上述，最后一步，调用一下genProxy方法即可
        ).genProxy(),
    },
};