在vue-cli项目设置代理proxyTable

问题描述:

• 1. 同一个页面可能需要调用后台的好几个接口,没有文档给出的固定的接口时,类似与http://xxxxxx.com/1/picture?method=upload 这种的,
• 2. 或者 前端本地开发需要模拟完成后端返回数据,结合mock.js,即可返回假数据,完成开发

适用项目: vue项目项目开发,使用vue-cli构建工具

解决办法:

使用vue-cli生成的开发环境，直接修改config/index.js文件，把proxytable:{}
里面配置成如下,后面的api就都会走target

proxyTable: {
  '/api': {
    target: 'http://xxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}

当然，此时的api接口形式应该为/api/xxx,
例如:

proxyTable: {
      '/pc/my/list/': {
        target: 'http://10.132.20.14:8083/mockjsdata/66',
        pathRewrite: {
          '^/pc/my/list/': '/pc/my/list/'
        }
      }
  }

发送请求时: get('/api/1/picture?method=upload')
若接口网址不同只需要再次加入接口对象即可

'/m/my/ajax/list/': {
        target: 'http://xxxx.com/66',
        pathRewrite: {
          '^/m/my/ajax/list/': '/mockjsdata/66/m/my/ajax/list/'
        }
      }