当我们本地开发,请求模拟数据的时候,我们可以能像下边这样写
axios.get('/static/mock/index.json').then(...)
但是,当我们代码要上线的时候,我们肯定是不能这样请求的,我们就需要把请求地址替换为 /api这种格式,像下边
axios.get('/api/index.json').then(...)
但是上线之前改动代码是有风险的,不建议这样做,我们该怎么解决这个问题呢?
我们想开发环境中,我们依然像下边这样写
axios.get('/api/index.json').then(...)
如果有一种转发机制,它可以帮助我们把 api下的所有的JSON文件的请求,都转发到本地的mock文件夹下,这样就可以了。
很棒的是,vue中,给我们提供了proxy代理的功能。
在config目录下的index.js里,dev开发环境了,官方给我们提供了一个proxyTable配置项
image.png
我们可以这样配置
proxyTable: {
'/api':{
target:'http://localhost:8080',
pathRewrite:{
'^/api':'static/mock'
}
}
},
这样写的意义是 :
当我们去请求 /api目录的时候,我们希望它帮助我们把请求转发到当前这台服务器的8080端口上,只不过呢,我们希望它把路径做一个替换,一旦请求的地址是以 /api开头的,那么就把它替换请求到 本地的static路径下的 mock文件夹下