webpack反向代理proxyTable设置
如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!
webpack反向代理proxyTable设置
proxyTable: {
'http://www.baidu.com/ttt': {
target: 'http://localhost:1333',
changeOrigin: true,
pathRewrite: {
'\\.\\w*$': '~okkk',
}
},
'/user': {
target: 'http://localhost:1333',
changeOrigin: true,
pathRewrite: {
'/user': 'ppqq',
}
}
},
最终会变成
{
context:'http://www.baidu.com/ttt',
options:{
target: 'http://localhost:1333',
changeOrigin: true,
pathRewrite: {
'\\.\\w*$': '~okkk',
}
}
},
{
context:'/user',
options:{
target: 'http://localhost:1333',
changeOrigin: true,
pathRewrite: {
'/user': 'ppqq',
}
}
},
查看http-proxy-middleware插件可以知悉实现代理细节:
1. 根据context(会根据url.parse获取到pathname,例如'http://www.baidu.com/ttt'实际使用的是'/ttt')来判断是否需要进行代理。
function matchSingleStringPath(context, uri) {
var pathname = getUrlPathName(uri);
return pathname.indexOf(context) === 0;
}
返回时true的时候才会对其进行代理
2. '\\.\\w*$'
会根据new Regex变成正则表达式/\.\w*$/
。变成rule
{
regex: /\.\w*$/,
value: '~okkk'
}
根据请求的path(req.url)开始匹配,在中间件过程中更改req.url为替换后的result
let result = path;
if (rule.regex.test(path)) {
result = result.replace(rule.regex, rule.value);
}
- 分类:
- Web前端
更新时间:
相关文章
用webpack的require.context优化vue store和router文件
早期右边博文专门讲了下require.context的用法和简单用法介绍《用webpack的require.context() 简化你的代码》 这次说点自己在vue项目中的具体应用吧 store 阅读更多…
从vuecli3学习webpack记录(一)vue-cli-serve机制
最近看了看vuecli3,把自己的学习记录下来。 首先看入口 npm run dev 即是 vue-cli-service serve ,之所以能运行 vue-cli-service 命令,就是 阅读更多…
以webpack为例来看微内核架构
微内核系统一般分为两个部分—— 核心系统 和 插件系统 ,这样就提供了很好的灵活性和可扩展性。 核心系统是最小可运行的模块,它提供的是通用逻辑(比如Tapable),而插件系统这是些具体的逻辑(比如 阅读更多…
从vuecli3学习webpack记录(三)基类Tapable和Hook分析
在查看webpack(及插件)源码的过程中,我们会经常看到类似这样的代码 compiler.hooks.done.tap('vue-cli-service serve',( 阅读更多…
webpack笔记——hook执行时call的是什么
我们一般使用的插件都是Hook子类,比如SyncHook,没有复杂的重写基类Hook的compile方法 先看Hook基类 // node_module/tapable/Hook.js cla 阅读更多…
从vuecli3学习webpack记录(四)vue是怎么进行默认配置的
在我们讲到 从vuecli3学习webpack记录(一)vue-cli-serve机制 vue cli3中在commands文件夹里面的是调用api.registerCommand方法,在 阅读更多…