vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用
devServer.proxy相關(guān)配置項(xiàng)的說(shuō)明
如圖：
devServer.proxy中的 changeOrigin 參數(shù)
changeOrigin 為false時(shí)，請(qǐng)求頭中host仍然是瀏覽器發(fā)送過(guò)來(lái)的host;如果設(shè)置成true：發(fā)送請(qǐng)求頭中host會(huì)設(shè)置成target的值。
devServer.proxy中的 pathRewrite 參數(shù)
本示例中，pathRewrite設(shè)置了 '^/lr': '' ，作用如下:
使用代理，首先需要有一個(gè)標(biāo)識(shí)，告訴程序這個(gè)連接要使用代理，不然的話，可能你的html、css、js、矢量圖等靜態(tài)資源都跑去代理。所以我們要通過(guò)一個(gè)唯一標(biāo)識(shí)，讓接口使用代理，靜態(tài)資源文件使用本地。
proxy中的 '/lr':{······}，就是告訴node，我的接口是要以 /lr 開(kāi)頭的才使用代理。所有的接口都要寫(xiě)成 /lr/xx/xx ，以 /lr 開(kāi)頭，最后代理的接口路徑路徑就是 http://localhost:8080/lirong/lr/xx/xx
但是例子中真實(shí)的后臺(tái)數(shù)據(jù)接口里沒(méi)有 /lr，直接就是 http://localhost:8080/lirong/xx/xx ，所以就需要配置 pathRewrite，用'^/lr': '' 將 /lr 去掉，這樣既有正確的標(biāo)識(shí)，又能在真實(shí)請(qǐng)求接口的時(shí)候去掉 /lr 。
devServer.proxy代理配置詳解
如果你的前端應(yīng)用和后端 API 服務(wù)器沒(méi)有運(yùn)行在同一個(gè)主機(jī)上，你需要在開(kāi)發(fā)環(huán)境下將 API 請(qǐng)求代理到 API 服務(wù)器?？梢酝ㄟ^(guò) *.config.js 中的 devServer.proxy 選項(xiàng)來(lái)配置。
.config.js文件中引入依賴(lài)項(xiàng)
const proxy = require('http-proxy-middleware');devServer.proxy 可以是一個(gè)指向開(kāi)發(fā)環(huán)境 API 服務(wù)器的字符串
//服務(wù)器會(huì)將任何未知請(qǐng)求 (沒(méi)有匹配到靜態(tài)文件的請(qǐng)求) 代理到http://localhost:4000上
module.exports = {
? devServer: {
? ? proxy: 'http://localhost:4000'
? }
}更多的代理控制行為
const proxy = require('http-proxy-middleware');
module.exports = { ??
devServer:{
? ? host: 'localhost',//target host
? ? port: 8080,
? ? //proxy:{'/api':{}},代理器中設(shè)置/api,項(xiàng)目中請(qǐng)求路徑為/api的替換為target
? ? proxy:{
? ? ? ? '/api':{
? ? ? ? ? ? target: 'http://192.168.1.30:8085',//代理地址，這里設(shè)置的地址會(huì)代替axios中設(shè)置的baseURL
? ? ? ? ? ? changeOrigin: true,// 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置
? ? ? ? ? ? //ws: true, // proxy websockets
? ? ? ? ? ? //pathRewrite方法重寫(xiě)url
? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? '^/api': '/'?
? ? ? ? ? ? ? ? //pathRewrite: {'^/api': '/'} 重寫(xiě)之后url為 http://192.168.1.16:8085/xxxx
? ? ? ? ? ? ? ? //pathRewrite: {'^/api': '/api'} 重寫(xiě)之后url為 http://192.168.1.16:8085/api/xxxx
? ? ? ? ? ?}
? ? }}
},
//...
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3項(xiàng)目使用pinia狀態(tài)管理器的使用
Pinia是一個(gè)專(zhuān)為Vue3設(shè)計(jì)的現(xiàn)代化狀態(tài)管理庫(kù),本文主要介紹了vue3項(xiàng)目使用pinia狀態(tài)管理器的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
vue中v-for和v-if不能在同一個(gè)標(biāo)簽使用的最新解決方案
這篇文章主要介紹了vue中v-for和v-if不能在同一個(gè)標(biāo)簽的最新解決方案,這里描述了兩種解決方案，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了this在vue和小程序中的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了vue部署后靜態(tài)文件加載404的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3中使用ant-design-vue的layout組件實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航欄和面包屑功能
這篇文章主要介紹了vue3中使用ant-design-vue的layout組件實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航欄和面包屑功能,基于一個(gè)新建的Vue3項(xiàng)目上實(shí)現(xiàn)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
vue實(shí)現(xiàn)輸入框的模糊查詢(xún)的示例代碼（節(jié)流函數(shù)的應(yīng)用場(chǎng)景）
這篇文章主要介紹了vue實(shí)現(xiàn)輸入框的模糊查詢(xún)的示例代碼（節(jié)流函數(shù)的應(yīng)用場(chǎng)景），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
快速了解Vue父子組件傳值以及父調(diào)子方法、子調(diào)父方法
這篇文章主要介紹了Vue父子組件傳值以及父調(diào)子方法、子調(diào)父方法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
本文主要介紹了vue中插槽(slot)幾種類(lèi)型的使用方法,主要分三種,默認(rèn)插槽,具名插槽,作用域插槽,下面就來(lái)一起介紹一下,感興趣的可以了解一下2024-03-03
elementplus?card?懸浮菜單的實(shí)現(xiàn)
本文主要介紹了elementplus?card?懸浮菜單的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
證件圖片識(shí)別上傳根據(jù)業(yè)務(wù)需要，經(jīng)常涉及到證件上傳，例如身份證上傳、銀行卡、營(yíng)業(yè)執(zhí)照等信息，根據(jù)設(shè)計(jì)師的設(shè)計(jì)，單獨(dú)封裝了一個(gè)上傳組件，這篇文章主要介紹了vue3?證件識(shí)別上傳組件封裝,需要的朋友可以參考下2023-05-05