子非鱼博客

在联调接口的时候，我们希望前端人员启动了vue项目访问本地页面时，调用接口数据所指向的IP是后端人员的IP，这时我们就需要用到vue-cli自带的代理功能！

vue-cli代理

我们打开 config/index.js 文件，找到以下代码：

在proxyTable: {}配置代理，配置信息如下：

 proxyTable: {
    '/marking': {
        target: 'http://192.168.0.172:30880',  // 真实请求的地址
        changeOrigin: true  // 是否开启代理
    },
    '/api/test1': {
        target: 'http://192.168.6.195:81',
        changeOrigin: true
    },
    '/api/test2': {
        target: 'http://192.168.0.160',
        changeOrigin: true
    }
} 

现在项目中所有请求地址为：
'/marking/xxxxx'真实的请求地址就变为了'http://192.168.0.172:30880/marking/xxxxx'
'/api/test1/xxxxx'真实的请求地址就变为了'http://192.168.6.195:81/api/test1/xxxxx'
'/api/test2/xxxxx'真实的请求地址就变为了'http://192.168.0.160/api/test2/xxxxx'