【解决webpack

2023-01-22 08:08| 来源: 网络整理| 查看: 265

【解决webpack-dev-server 动态配置代理问题】:https://code84.com/723524.html#devServerproxy_12

devServer proxy 日常配置:https://www.jianshu.com/p/eb889ab7f057

文章目录前言一、devServer-proxy 二、配置方式 1. 配置多个代理 2.使用 http-proxy-middleware 的router 总结

前言

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

一、devServer-proxy

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

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.使用 http-proxy-middleware 的router

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 的内容默认和proxy的target一样：

http://dev.com/

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

http://test.com/ 总结

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

【本文地址】

【解决webpack

【解决webpack

今日新闻

推荐新闻