詳解vue-cli 接口代理配置

更新時(shí)間：2017年12月13日 15:45:39 作者：MaJing_CUI

本篇主要介紹了vue-cli 接口代理配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了vue-cli 接口代理配置，分享給大家，具體如下：

一些同學(xué)在配置接口代理時(shí)，會(huì)有疑問(wèn) 我配置成功了為什么接口還是不通，其實(shí)代理已經(jīng)成功只是接口訪問(wèn)地址規(guī)則沒(méi)搞清楚

下面以本地測(cè)試為栗子向大家介紹

一些基本操作這里就不介紹了

找到vue-cli config 文件夾下的 index.js 這是是配置接口規(guī)則的文件同目錄下建立 proxyConfig.js 一些同學(xué)習(xí)慣直接在原文件修改，也是可以但推薦使用新建文件的方式：

module.exports = {
  proxyList: {
    '/api': {
      target: 'http://localhost:3000',  （這里是代理接口的位置）
      changeOrigin: true,（允許跨域，如果這不寫，調(diào)用接口接口時(shí)會(huì)有跨域錯(cuò)誤說(shuō)缺少請(qǐng)求頭）
      pathRewrite: {'^/api': '' } （路由規(guī)則下面詳細(xì)介紹）
    }
  }
}

******路由規(guī)則*******

上述代碼執(zhí)行之后，意思就是只要在接口中看到‘/api‘ 會(huì)自動(dòng)變成我們?cè)O(shè)置的地址，那么我們?cè)谠O(shè)置的時(shí)候可以規(guī)范接口書寫標(biāo)準(zhǔn) 就用到了這個(gè)屬性 pathRewrite 路徑重寫{'^/api': '' } 是指你想讓路由變成什么樣子，如果是空那么在解析時(shí) 如果我們的接口寫的是 $http.get('/api/good') 那么在服務(wù)端我們將會(huì)看到 /good的訪問(wèn)，如果此時(shí)在服務(wù)端并沒(méi)有相應(yīng)的路由匹配，客服端就會(huì)顯示報(bào)錯(cuò)，端口號(hào)還是客戶端的端口號(hào)，所以很多同學(xué)就錯(cuò)覺(jué)沒(méi)有起作用，同理如果我們?cè)O(shè)置{'^/api': '/api' } 那么在服務(wù)端將會(huì)看到/api/goods 的接口訪問(wèn)，意思就是不僅將/api自動(dòng)解析成代理地址，還會(huì)作為服務(wù)端的路由展示。

另外在設(shè)置路由規(guī)則注意分隔符/ 有些同學(xué)喜歡這樣寫 target: 'http://localhost:3000/', 自己寫端口后面加上一個(gè)分隔符，會(huì)發(fā)現(xiàn)路由對(duì)不上，這時(shí)你需要在命名的時(shí)候也要加上‘/' 路由規(guī)則也要加上‘/' 接口才能對(duì)，不然會(huì)發(fā)現(xiàn)請(qǐng)求接口的時(shí)候多了一個(gè)分隔符如：'/api//goods'。

設(shè)置完之后，在index.js 里面引入 proxyConfig.js，設(shè)置 proxyTable 完成設(shè)置

const proxyConfig = require('./proxyConfig')
module.exports = {
  dev: {
    env: require('./dev.env'),
    host: 'localhost',
    port: 8188,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxyList,
    cssSourceMap: false,
  }
 }

請(qǐng)求時(shí) 這樣寫

復(fù)制代碼代碼如下:

axios.get('/api/goods').then((res)=>{console.log(res.data);}}).catch((err)=>{console.log(err);}})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

詳解vue-cli 接口代理配置

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具