vue-cli項目代理proxyTable配置exclude的方法
問題描述
如果是前后端分離的項目,本地開發(fā)環(huán)境需要訪問mock,或者在調試時直接訪問線上的接口,這時候就會有接口跨域的問題(mock不存在跨域問題,但是用這個方法配置起來方便,姑且算是一個問題)。以vue-cli生成的項目為例,需要配置 config/index.js 中的 proxyTable 屬性,大概如下:
proxyTable: { '/pc/my/list/': { target: 'http://10.132.20.14:8083/mockjsdata/66', pathRewrite: { '^/pc/my/list/': '/pc/my/list/' } } },
配置規(guī)則在網上搜proxyTable就能搜到,這里不做贅述。今天要說的是另一個問題,請見下面的代碼:
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/' } } },
明明一句(見下)就能解決的問題,為什么要寫成這個樣子?難道就是因為使用者沒有學好?
proxyTable:{ '/m':{ target: 'http://10.132.20.14:8083/mockjsdata/66' } },
事情當然沒這么簡單。原因是,后端在設計接口時,沒有把api和模板分開,都在一個命名空間下(比如,首頁的地址是 /m/index)。這時候,如果按照上面那樣配置,連模板接口也會被代理掉,所以只能一個一個的寫,實在是前端在給后端背鍋??!那么有沒有更優(yōu)雅的辦法呢?比如exclude之類的?
我們發(fā)現(xiàn),實現(xiàn)代理功能的插件是http-proxy-middleware,在文檔中我們發(fā)現(xiàn)了這一段:
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。在看過源碼后,我發(fā)現(xiàn),webpack-dev-server的proxy接收參數(shù)其實是個數(shù)組,并且里面有一個context值,就是來傳遞http-proxy-middleware第一個參數(shù)的。所以,我們不用傻傻的按照vue-cli給的不敢動,只要改成下面的就行了
proxyTable: [{ context: ['/m/**','!/m/index'], target: 'http://10.132.20.14:8083/mockjsdata/66' }],
OK,這個版本是比較簡單的,下面說一下2.8.2版本的
這個版本有個 build/dev-server.js 文件,大概在 50 行左右,有類似下面的代碼
// 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的情況,沒辦法,我們自己來動手改一下吧,加個方法
// 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都會變成數(shù)組。然后在proxyTable的配置里只要寫成如下即可
proxyTable:{ 'm/**,!/m/index':{ target: 'http://10.132.20.14:8083/mockjsdata/66' } },
可以了,現(xiàn)在兩個版本都搞定了,強迫癥的心好累,我去歇會。。?;仡^再優(yōu)化吧
以上這篇vue-cli項目代理proxyTable配置exclude的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
uniapp中使用u-loadmore,loadText內容不隨status改變刷新方式
這篇文章主要介紹了uniapp中使用u-loadmore,loadText內容不隨status改變刷新方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05vue 項目@change多個參數(shù)傳值多個事件的操作
這篇文章主要介紹了vue 項目@change多個參數(shù)傳值多個事件的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01基于node+vue實現(xiàn)簡單的WebSocket聊天功能
最近學習了一下websocket的即時通信,感覺非常的強大,這里我用node啟動了一個服務進行websocket鏈接,然后再vue的view里面進行了鏈接,進行通信,廢話不多說,直接上代碼吧2020-02-02vue-router重寫push方法,解決相同路徑跳轉報錯問題
這篇文章主要介紹了vue-router重寫push方法,解決相同路徑跳轉報錯問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08