vue-cli項目代理proxyTable配置exclude的方法
問題描述
如果是前後端分離的項目，本地開發環境需要訪問mock，或者在調試時直接訪問線上的接口，這時候就會有接口跨域的問題（mock不存在跨域問題，但是用這個方法配置起來方便，姑且算是一個問題）。以vue-cli生成的項目為例，需要配置 config/index.js 中的 proxyTable 屬性，大概如下：
?| 1 2 3 4 5 6 7 8 |
proxyTable: {
‘/pc/my/list/‘: {
target: ‘http://10.132.20.14:8083/mockjsdata/66‘,
pathRewrite: {
‘^/pc/my/list/‘: ‘/pc/my/list/‘
}
}
}, |
配置規則在網上搜proxyTable就能搜到，這裏不做贅述。今天要說的是另一個問題，請見下面的代碼：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
proxyTable: {
‘/m/userinfo/‘: {
target: ‘http://10.132.20.14:8083‘,
pathRewrite: {
‘^/m/userinfo/‘: ‘/mockjsdata/66/m/userinfo/‘}
},
‘/m/my/ajax/list/‘: {
target: ‘http://10.132.20.14:8083‘,
pathRewrite: {
‘^/m/my/ajax/list/‘: ‘/mockjsdata/66/m/my/ajax/list/‘
}
},
‘/m/tkpreinterview‘:{
target: ‘http://10.132.20.14:8083‘,
pathRewrite: {
‘^/m/tkpreinterview‘: ‘/mockjsdata/66/m/tkpreinterview‘
}
},
‘/m/preinterview‘:{
target: ‘http://10.132.20.14:8083‘,
pathRewrite: { ‘^/m/preinterview‘: ‘/mockjsdata/66/m/preinterview‘
}
},
‘/m/interview‘:{
target: ‘http://10.132.20.14:8083‘,
pathRewrite: {
‘^/m/interview‘: ‘/mockjsdata/66/m/interview‘
}
},
‘/m/checkLogin‘:{
target: ‘http://10.132.20.14:8083‘,
pathRewrite: {
‘^/m/checkLogin‘: ‘/mockjsdata/66/m/checkLogin‘
}
},
‘/m/my/ajax/vdetail/‘:{
target: ‘http://10.132.20.14:8083‘,
pathRewrite: {
‘^/m/my/ajax/vdetail/‘: ‘/mockjsdata/66/m/my/ajax/vdetail/‘
}
}
},
|
明明一句（見下）就能解決的問題，為什麽要寫成這個樣子？難道就是因為使用者沒有學好？
?| 1 2 3 4 5 |
proxyTable:{
‘/m‘:{
target: ‘http://10.132.20.14:8083/mockjsdata/66‘
}
},
|
事情當然沒這麽簡單。原因是，後端在設計接口時，沒有把api和模板分開，都在一個命名空間下（比如，首頁的地址是 /m/index）。這時候，如果按照上面那樣配置，連模板接口也會被代理掉，所以只能一個一個的寫，實在是前端在給後端背鍋啊！那麽有沒有更優雅的辦法呢？比如exclude之類的？
我們發現，實現代理功能的插件是http-proxy-middleware，在文檔中我們發現了這一段：
?| 1 2 3 4 5 6 |
proxy(‘**‘, {...}) matches any path, all requests will be proxied.
proxy(‘**/*.html‘, {...}) matches any path which ends with .html
proxy(‘/*.html‘, {...}) matches paths directly under path-absolute
proxy(‘/api/**/*.html‘, {...}) matches requests ending with .html in the path of /api
proxy([‘/api/**‘, ‘/ajax/**‘], {...}) combine multiple patterns
proxy([‘/api/**‘, ‘!**/bad.json‘], {...}) exclusion
|
註意最後一條，此插件是支持exclude的。以我們上面的例子來說，只要key的值寫成類似 [‘/m/**‘ , ‘!/m/index‘] 這樣的就行了。可是！你見過object的key是個array的嗎？好吧，不啰嗦，直接看源碼。
說明一下，我們的項目，之前用的vue-cli版本是2.8.2，我自己實驗的版本是2.9.1，這兩個版本是不一樣的，咱一個一個說。
先說2.9.1版本生成的，此版本沒有了 build/dev-server.js 以及類似的文件，直接用了 webpack-dev-server。在看過源碼後，我發現，webpack-dev-server的proxy接收參數其實是個數組，並且裏面有一個context值，就是來傳遞http-proxy-middleware第一個參數的。所以，我們不用傻傻的按照vue-cli給的不敢動，只要改成下面的就行了
?| 1 2 3 4 |
proxyTable: [{
context: [‘/m/**‘,‘!/m/index‘],
target: ‘http://10.132.20.14:8083/mockjsdata/66‘
}],
|
OK，這個版本是比較簡單的，下面說一下2.8.2版本的
這個版本有個 build/dev-server.js 文件，大概在 50 行左右，有類似下面的代碼
?| 1 2 3 4 5 6 7 8 |
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === ‘string‘) {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
|
可以看到，這裏的context只考慮到了string的情況，沒辦法，我們自己來動手改一下吧，加個方法
?| 1 2 3 4 5 6 7 8 |
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === ‘string‘) {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context.split(‘,‘), options))//context -> context.split(‘,‘)
})
|
這樣你傳進來的key都會變成數組。然後在proxyTable的配置裏只要寫成如下即可
?| 1 2 3 4 5 |
proxyTable:{
‘m/**,!/m/index‘:{
target: ‘http://10.132.20.14:8083/mockjsdata/66‘
}
},
|
可以了，現在兩個版本都搞定了，強迫癥的心好累，我去歇會。。。回頭再優化吧
解放程序猿(媛)的雙手-IOS自動化測試那些幹貨視頻課程 下載地址：百度網盤下載
selenium2從零學習自動化測試視頻 下載地址：百度網盤下載
光榮之路Android自動化測試高級實戰 下載地址：百度網盤下載
快速上手Jmeter性能測試工具全程實戰視頻教程 下載地址：百度網盤下載
Android手機app端基於DDMS性能測試實戰 下載地址：百度網盤下載
系統學習Android系統級白盒測試以及與自動化測試全程實錄 下載地址：百度網盤下載
淺談零基礎自學Android UIAutomator自動化測試系列開發知識體系圖視頻教程 下載地址：百度網盤下載
2016年小馬哥IOS9 OC Swift2.0大神班第五期培訓 高清視頻教程80G 下載地址：百度網盤下載
極客學院iOS開發工程師初級+中級+高級視頻教程 下載地址：百度網盤下載
極客學院C#視頻教程 下載地址：百度網盤下載
極客學院Android安卓工程師初級+中級+高級培訓 下載地址：百度網盤下載
2018年4月份剛畢業珠峰培訓前端全棧視頻 下載地址：百度網盤下載
微信小遊戲入門與實戰 刷爆朋友圈 下載地址：百度網盤下載
兄弟連新版Web 前端視頻教程 下載地址：百度網盤下載
兄弟連新版PHP視頻教程(共346講) 下載地址：百度網盤下載
微信公眾平臺接口二次開發搭建教程 下載地址：百度網盤下載
蠻牛第2季- Unity2d遊戲開發經典教程 下載地址：百度網盤下載
Unity3D ARPG網絡遊戲編程實踐 下載地址：百度網盤下載
蠻牛unity開發第五季 C#編程開發搖擺直升機實例教程 下載地址：百度網盤下載
四大維度解鎖 Webpack 3.0 前端工程化 下載地址：百度網盤下載
vue-cli項目代理proxyTable配置exclude的方法