欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-cli項目代理proxyTable配置exclude的方法

 更新時間:2018年09月20日 08:42:36   作者:zhaolandelong  
今天小編就為大家分享一篇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的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • Vue 中mixin 的用法詳解

    Vue 中mixin 的用法詳解

    e中提供了一種混合機制--mixins,用來更高效的實現(xiàn)組件內容的復用。這篇文章主要介紹了Vue mixin 的用法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-04-04
  • uniapp中使用u-loadmore,loadText內容不隨status改變刷新方式

    uniapp中使用u-loadmore,loadText內容不隨status改變刷新方式

    這篇文章主要介紹了uniapp中使用u-loadmore,loadText內容不隨status改變刷新方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • Vue中data數(shù)據初始化方法詳解

    Vue中data數(shù)據初始化方法詳解

    這篇文章主要介紹了Vue中data數(shù)據初始化方法,數(shù)據初始化是在組件實例化時發(fā)生的,在組件中,可以通過data選項來定義組件的初始數(shù)據,需要詳細了解可以參考下文
    2023-05-05
  • el-table樹形數(shù)據序號排序處理方案

    el-table樹形數(shù)據序號排序處理方案

    這篇文章主要介紹了el-table樹形數(shù)據序號排序處理方案,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2024-03-03
  • vue 項目@change多個參數(shù)傳值多個事件的操作

    vue 項目@change多個參數(shù)傳值多個事件的操作

    這篇文章主要介紹了vue 項目@change多個參數(shù)傳值多個事件的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2021-01-01
  • vue豎向步驟條方式

    vue豎向步驟條方式

    這篇文章主要介紹了vue豎向步驟條方式,具有很好的參考價值,希望對大家有所幫助,
    2023-12-12
  • 在vue項目中引入highcharts圖表的方法

    在vue項目中引入highcharts圖表的方法

    今天小編就為大家分享一篇關于在vue項目中引入highcharts圖表的方法,小編覺得內容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • 基于node+vue實現(xiàn)簡單的WebSocket聊天功能

    基于node+vue實現(xiàn)簡單的WebSocket聊天功能

    最近學習了一下websocket的即時通信,感覺非常的強大,這里我用node啟動了一個服務進行websocket鏈接,然后再vue的view里面進行了鏈接,進行通信,廢話不多說,直接上代碼吧
    2020-02-02
  • vue中的計算屬性實例詳解

    vue中的計算屬性實例詳解

    模板內的表達式非常便利,但是設計它們的初衷是用于簡單運算的。接下來通過本文給大家介紹vue中的計算屬性,需要的朋友可以參考下
    2018-09-09
  • vue-router重寫push方法,解決相同路徑跳轉報錯問題

    vue-router重寫push方法,解決相同路徑跳轉報錯問題

    這篇文章主要介紹了vue-router重寫push方法,解決相同路徑跳轉報錯問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08

最新評論