本文介绍: 在常规开发中,基本上都会有好几套环境开发环境dev.com,测试环境test.com我们对接不同环境联调时候,一般是通过切换target,来实现连接不同环境。然而,总是需要切换不同域名或者多个后端同事协同开发时候,经常切换target,那就得经常重启服务,这就让人很难受了


前言

在常规开发中,基本上都会有好几套环境开发环境dev.com,测试环境test.com。我们在对接不同的环境联调时候,一般是通过切换target,来实现连接不同的环境。然而,总是需要切换不同域名或者多个后端同事协同开发时候,经常切换target,那就得经常重启服务,这就让人很难受了。


一、devServerproxy

前端开的时候本地启动的环境,访问地址一般都是默认localhost+端口,而我们由于业务需要与不同的环境进行联调这个时候就有了跨域问题需要解决,而解决方式一般是两种,一种是本地用Nginx代理,另一种就是我们常用devServerproxy

devServer: {
        proxy: {
            '/api': {
                target: `http://${ip}:9002/`,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '',
                },
            },
        },
    },

二、配置方式

1. 配置多个代理

有些小伙伴就想,解决经常重启服务问题也很好办,我多配置几个’/api’就可以了,通过axios发起请求的时候,对不同环境,分别配置一个中间路径,这也可以一个解决办法

devServer: {
        proxy: {
            '/test-api': {
                target: 'http://test.com/',
                changeOrigin: true,
                pathRewrite: {
                    '^/test-api': '',
                },
            },
            '/dev-api': {
                target: 'http://dev.com/',
                changeOrigin: true,
                pathRewrite: {
                    '^/dev-api': '',
                },
            },
            ...
        },
    },

但是这种方式维护起来很麻烦,也有不小心将开发环境的变量提交测试环境的风险

2.使用 httpproxymiddlewarerouter

http-proxy-middleware一个属性 router可以动态覆盖target

// Use `host` and/or `path` to match requests. First match will be used.
// The order of the configuration matters.
router: {
    'integration.localhost:3000' : 'http://localhost:8001',  // host only
    'staging.localhost:3000'     : 'http://localhost:8002',  // host only
    'localhost:3000/api'         : 'http://localhost:8003',  // host + path
    '/rest'                      : 'http://localhost:8004'   // path only
}

// Custom router function (string target)
router: function(req) {
    return 'http://localhost:8004';
}

// Custom router function (target object)
router: function(req) {
    return {
        protocol: 'https:', // The : is required
        host: 'localhost',
        port: 8004
    };
}

// Asynchronous router function which returns promise
router: async function(req) {
    const url = await doSomeIO();
    return url;
}

而我们仅需要这样子配置:

devServer: {
        proxy: {
            '/api': {
                target: 'http://dev.com/',
                //target: 'http://test.com/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '',
                },
                router: () => url //URL 会覆盖 target成为新的代理地址
            },
        },
    },

具体的实现方式就是,在项目根目录,配置一个target.env 文件,将需要代理地址,写在这个文件里,然后通过fs读取target.env里的内容动态返回router,从而实现动态切换环境,而不需要重启服务:

devServer: {
        proxy: {
            '/api': {
                target: 'http://dev.com/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '',
                },
                 router: () => {
                    return fs.readFileSync(process.cwd() + '/target.env', 'utf8');
                }
            },
        },
    },

target.env 的内容默认proxytarget一样:

 http://dev.com/

需要访问哪个环境,就填入哪个环境的地址可以了,比如我原本访问的是
http://dev.com ,现在要访问http://test.com/ 。我只需要将文件里的内容替换成 http://test.com/ ,代理就会立即生效,不需要重启

 http://test.com/

总结

动态配置代理,解决开发过程中需要频繁重启服务借还不同环境的问题,能够给我们开发带来极大的便利,提升开发效率

原文地址:https://blog.csdn.net/Z_huade/article/details/124410683

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_47440.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注