vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用
devServer.proxy相關(guān)配置項(xiàng)的說明
如圖：
devServer.proxy中的 changeOrigin 參數(shù)
changeOrigin 為false時(shí)，請(qǐng)求頭中host仍然是瀏覽器發(fā)送過來的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)資源都跑去代理。所以我們要通過一個(gè)唯一標(biāo)識(shí)，讓接口使用代理，靜態(tài)資源文件使用本地。
proxy中的 '/lr':{······}，就是告訴node，我的接口是要以 /lr 開頭的才使用代理。所有的接口都要寫成 /lr/xx/xx ，以 /lr 開頭，最后代理的接口路徑路徑就是 http://localhost:8080/lirong/lr/xx/xx
但是例子中真實(shí)的后臺(tái)數(shù)據(jù)接口里沒有 /lr，直接就是 http://localhost:8080/lirong/xx/xx ，所以就需要配置 pathRewrite，用'^/lr': '' 將 /lr 去掉，這樣既有正確的標(biāo)識(shí)，又能在真實(shí)請(qǐng)求接口的時(shí)候去掉 /lr 。
devServer.proxy代理配置詳解
如果你的前端應(yīng)用和后端 API 服務(wù)器沒有運(yùn)行在同一個(gè)主機(jī)上，你需要在開發(fā)環(huán)境下將 API 請(qǐng)求代理到 API 服務(wù)器?？梢酝ㄟ^ *.config.js 中的 devServer.proxy 選項(xiàng)來配置。
.config.js文件中引入依賴項(xiàng)
const proxy = require('http-proxy-middleware');devServer.proxy 可以是一個(gè)指向開發(fā)環(huán)境 API 服務(wù)器的字符串
//服務(wù)器會(huì)將任何未知請(qǐng)求 (沒有匹配到靜態(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方法重寫url
? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? '^/api': '/'?
? ? ? ? ? ? ? ? //pathRewrite: {'^/api': '/'} 重寫之后url為 http://192.168.1.16:8085/xxxx
? ? ? ? ? ? ? ? //pathRewrite: {'^/api': '/api'} 重寫之后url為 http://192.168.1.16:8085/api/xxxx
? ? ? ? ? ?}
? ? }}
},
//...
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue組件之間的數(shù)據(jù)傳遞方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
通常開發(fā)vue我們使用的是模板語法，其實(shí)還有和react相同的語法，那就是render函數(shù)，同樣支持jsx語法。Vue 的模板實(shí)際是編譯成了 render 函數(shù)。2017-05-05
這篇文章主要介紹了vue刷新后瞬間閃爍,無法解析的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue Transition實(shí)現(xiàn)類原生組件跳轉(zhuǎn)過渡動(dòng)畫的示例
本篇文章主要介紹了Vue Transition實(shí)現(xiàn)類原生組件跳轉(zhuǎn)過渡動(dòng)畫的示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了vue-dialog的彈出層組件，可以通過npm引用的組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue-router路由懶加載及實(shí)現(xiàn)方式,路由懶加載的主要作用是將?路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊，只有在這個(gè)路由被訪問到的時(shí)候，才會(huì)加載對(duì)應(yīng)組件的代碼塊，需要的朋友可以參考下2022-12-12
Vue實(shí)現(xiàn)移動(dòng)端拖拽交換位置
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)移動(dòng)端拖拽交換位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
Ant?Design_Form表單上傳文件組件實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Ant?Design_Form表單上傳文件組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了詳解vue頁面首次加載緩慢原因及解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
利用Vue模擬實(shí)現(xiàn)element-ui的分頁器效果
這篇文章主要為大家詳細(xì)介紹了如何利用Vue模擬實(shí)現(xiàn)element-ui的分頁器效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手嘗試一下2022-11-11