詳解vue-cli 接口代理配置
本文介紹了vue-cli 接口代理配置，分享給大家，具體如下：
一些同學在配置接口代理時，會有疑問 我配置成功了為什么接口還是不通 ，其實代理已經成功 只是 接口訪問地址規(guī)則沒搞清楚
下面以本地測試為栗子 向大家介紹
一些基本操作這里就不介紹了
找到vue-cli config 文件夾下的 index.js 這是是配置接口規(guī)則的文件 同目錄下建立 proxyConfig.js 一些同學習慣直接在原文件修改 ，也是可以但推薦使用新建文件的方式：
module.exports = {
proxyList: {
'/api': {
target: 'http://localhost:3000', （這里是代理接口的位置）
changeOrigin: true,（允許跨域，如果這不寫，調用接口接口時會有跨域錯誤說缺少請求頭）
pathRewrite: {'^/api': '' } （路由規(guī)則下面詳細介紹）
}
}
}
******路由規(guī)則*******
上述代碼執(zhí)行之后，意思就是 只要在接口中看到‘/api‘ 會自動變成我們設置的地址，那么我們在設置的時候可以規(guī)范接口書寫標準 就用到了這個屬性 pathRewrite 路徑重寫{'^/api': '' } 是指你想讓路由變成什么樣子 ，如果是空 那么在解析時 如果我們的接口寫的是 $http.get('/api/good') 那么在服務端我們將會看到 /good的訪問，如果此時在服務端并沒有相應的路由匹配，客服端就會顯示報錯，端口號還是客戶端的端口號，所以很多同學就錯覺沒有起作用 ，同理如果我們設置{'^/api': '/api' } 那么在服務端將會看到/api/goods 的接口訪問，意思就是不僅將/api自動解析成代理地址，還會作為服務端的路由展示。
另外在設置路由規(guī)則注意分隔符/ 有些同學喜歡這樣寫 target: 'http://localhost:3000/', 自己寫端口后面加上一個分隔符，會發(fā)現路由對不上，這時你需要在命名的時候也要加上‘/' 路由規(guī)則也要加上‘/' 接口才能對，不然 會發(fā)現請求接口的時候多了一個分隔符 如：'/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,
}
}
請求時 這樣寫
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue轉react useEffect的全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue 檢測用戶上傳圖片寬高的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要介紹了vue 解決data中定義圖片相對路徑頁面不顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了用vue實現注冊頁，短信驗證碼登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家介紹了vue實現無縫滾動手摸手教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了Element Steps步驟條的使用方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了vue實現商城秒殺倒計時功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
vue短信驗證性能優(yōu)化如何寫入localstorage中
這篇文章主要介紹了vue短信驗證性能優(yōu)化寫入localstorage中的方法，解決這個問題需要把時間都寫到localstorage里面去，具體解決方法大家參考下本文2018-04-04
當用戶登錄后,如果長時間未操作頁面這個時候需要自動退出登錄回到登錄頁面,本文將給大家介紹一下vue設置頁面超時15分鐘自動退出登錄的方法,感興趣的同學可以自己動手試一下2023-10-10
vue-router傳遞參數分為兩大類，一類是編程式的導航 router.push另一類是聲明式的導航 <router-link>，本文通過實例代碼給大家介紹vue-router傳遞參數的幾種方式，感興趣的朋友跟隨小編一起看看吧2018-11-11