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

公司主營業(yè)務(wù)：成都網(wǎng)站制作、網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出淮濱免費做網(wǎng)站回饋大家。

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

下面以本地測試為栗子 向大家介紹

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

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

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

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

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

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

請求時 這樣寫

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。