我們?cè)趯懬岸舜a的時(shí)候,可能后端接口還沒(méi)有寫好惕虑,這個(gè)時(shí)候坟冲,就需要我們自己mock數(shù)據(jù)磨镶,也就是說(shuō),前端的數(shù)據(jù)都是我們靜態(tài)模擬的健提。比如,我們會(huì)在config文件夾下的 index.js文件中像下邊這樣配置proxyTable
//下邊配置的意思是琳猫,在開(kāi)發(fā)環(huán)境下當(dāng)我們?cè)L問(wèn)/api這個(gè)路徑,它會(huì)幫你把這個(gè)路徑的請(qǐng)求私痹,打到localhost:8080這個(gè)端口上脐嫂,這個(gè)端口是前端服務(wù)器的端口
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target:'http://localhost:8080',
pathRewrite:{
'^/api':'static/mock'
}
}
},
但是當(dāng)后端接口寫好后,我們就需要請(qǐng)求后臺(tái)數(shù)據(jù)進(jìn)行測(cè)試了紊遵。這個(gè)時(shí)候账千,我們就不能讓它把請(qǐng)求轉(zhuǎn)到8080端口了,而是轉(zhuǎn)到后臺(tái)服務(wù)器端口上
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
//這種情況是后端服務(wù)器在本地80端口上
target:'http://localhost:80',
}
},
但是真實(shí)的前后端聯(lián)調(diào)暗膜,后端服務(wù)器有可能在后端開(kāi)發(fā)人員自己的電腦上匀奏,或者在內(nèi)網(wǎng)或外網(wǎng)的服務(wù)器上,這個(gè)時(shí)候代理就不能寫localhost這個(gè)地址了学搜,你可以寫內(nèi)網(wǎng)的IP地址娃善,比如192.168.11...
或者寫外網(wǎng)的域名
通過(guò)這種形式,我們就可以把前端向/api這個(gè)地址的任何的請(qǐng)求恒水,代理轉(zhuǎn)發(fā)給任何一臺(tái)后端服務(wù)器会放,從而非常方便的實(shí)現(xiàn)前后端聯(lián)調(diào)