在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/'
        }
      }