本篇主要介紹了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);}})上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
在react-router中如何使用history控制路由（詳細教學）
以上是使用vue-cli如何設定介面代理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
