使用vue-cli如何設定介面代理

本篇主要介紹了vue-cli 介面代理配置，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

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

一些同學在配置接口代理時，會有疑問我配置成功了為什麼介面還是不通，其實代理已經成功只是介面存取位址規則沒搞清楚

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

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

找到vue-cli config 資料夾下的index.js  這是是設定介面規則的檔案同目錄下建立proxyConfig.js  一些同學習慣直接在原檔案修改，也是可以但推薦使用新建檔案的方式：

module.exports = {
  proxyList: {
    '/api': {
      target: 'http://localhost:3000',  （这里是代理接口的位置）
      changeOrigin: true,（允许跨域，如果这不写，调用接口接口时会有跨域错误说缺少请求头）
      pathRewrite: {'^/api': '' } （路由规则下面详细介绍）
    }
  }
}

******路由規則*******

上述程式碼執行之後，意思是只要在介面中看到'/api' 會自動變成我們設定的位址，那麼我們在設定的時候可以規範介面書寫標準就用到了這個屬性pathRewrite 路徑重寫{'^/api': '' } 是指你想讓路由變成什麼樣子，如果是空那麼在解析時如果我們的介面寫的是$http.get('/api/good') 那麼在服務端我們將會看到/good的訪問，如果此時在服務端並沒有對應的路由匹配，客服端就會顯示報錯，端口號還是客戶端的端口號，所以很多同學就錯覺沒有起作用，同理如果我們設置{'^/api': '/api' } 那麼在服務端將會看到/api/goods的介面訪問，意思是不僅將/api自動解析成代理位址，還會作為服務端的路由展示。

另外在設定路由規則注意分隔符號/  有些同學喜歡這樣寫target: 'http://localhost:3000/', 自己寫連接埠後面加上分隔符，會發現路由對不上，這時你需要在命名的時候也要加上'/' 路由規則也要加上'/' 介面才能對，不然會發現請求介面的時候多了一個分隔符號如：'/api//goods'。

設定完後，在index.js 裡面引入proxyConfig.js，設定proxyTable 完成設定

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,
  }
 }

要求時這樣寫

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

上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

有關Vue2.0父子元件間實作派發機制（詳細教學）

在react-router中如何使用history控制路由（詳細教學）

利用jqprint如何實現列印頁面內容

使用js實作微信喚起支付寶領紅包（詳細教學）

使用Gulp如何實作靜態網頁模組化具體怎麼做？

在vue.js中整合vux如何實作上拉載入下拉刷新

以上是使用vue-cli如何設定介面代理的詳細內容。更多資訊請關注PHP中文網其他相關文章！