Vue 开发阶段从不同 IP 获取数据 devServer 设置
Vue 开发阶段从不同 IP 获取数据 devServer 设置有的时候,前端开发过程中,后台分块开发,在不同后台开发者手中,就需要从不同位置获取数据。比如:接口地址后台/api/device/192.168.0.208:8888/api/login/192.168.0.148/api/camera192.168.0.208:8083那么现在该如何从不同位置获取数据呢。解决办法只需要在 vue.c
·
Vue 开发阶段从不同 IP 获取数据 devServer 设置
有的时候,前端开发过程中,后台分块开发,在不同后台开发者手中,就需要从不同位置获取数据。
比如:
接口地址 | 后台 |
---|---|
/api/device/ | 192.168.0.208:8888 |
/api/login/ | 192.168.0.148 |
/api/camera | 192.168.0.208:8083 |
那么现在该如何从不同位置获取数据呢。
解决办法
只需要在 vue.config.js
中的 devServer
设置一下代理就行了
devServer: {
proxy: {
"/api/device": {
target: 'http://192.168.0.208:8888/',
pathRewrite: {'^/api/device': '/api/device'},
changeOrigin: true,
},
"/api/login": {
target: 'http://192.168.0.148/',
pathRewrite: {'^/api/login': '/api/login'},
changeOrigin: true,
},
"/api/camera": {
target: 'http://192.168.0.208:8083/',
pathRewrite: {'^/api/camera': '/api/camera'},
changeOrigin: true,
},
// 除上面这些以外,其它任意 /api/* 的链接都会走下面这个
"/api": {
target: 'http://192.168.0.208/',
pathRewrite: {'^/api': '/api'},
changeOrigin: true,
},
}
}
不过需要注意的是,跟路由配置一样,范围广的写在下面,如:
/api/device
就应该写到 /api
前面,不然 /api
请求就会被 /api
匹配到,而不再匹配下面的 /api/device
地址
请求的时候正常请求就可以了,它会自动代理
更多推荐
已为社区贡献15条内容
所有评论(0)