Vue配置多個跨域目標鏈接

參考：

https://segmentfault.com/a/1190000016199721

1、通過使用的http-proxy-middleware來實現跨域代理

  devServer: {
    disableHostCheck: true, //  新增該配置項
    port: 8666,
    publicPath, // 和 publicPath 保持一致
    open: false, //啟動服務時自動打開瀏覽器訪問
    proxy: {
      //開發環境代理配置
      // 配置前綴
      // '/dev-api': {
      [process.env.VUE_APP_BASE_API]: {
        //  目標服務器地址
        target: process.env.VUE_APP_SERVICE_URL,
        // target: process.env.VUE_APP_SERVICE_REAL_URL,
        changeOrigin: true, //開啟代理轉發
        pathRewrite: {
          // '^/dev-api': '',    //此設置將請求地址前綴 /dev-api 替換為空
          ["^" + [process.env.VUE_APP_BASE_API]]: ""
        }
      },
      [process.env.VUE_APP_BASE_TEST_API]: {
        target: process.env.VUE_APP_SERVICE_TEST_URL,
        changeOrigin: true,
        pathRewrite: {
          ["^" + [process.env.VUE_APP_BASE_TEST_API]]: ""
        }
      }
    }
  },

2、配置中主要參數說明：

2.1 '/api'

捕獲API的標志，如果API中有這個字符串，那么就開始匹配代理，
比如API請求/api/users, 會被代理到請求 http://www.baidu.com/api/users 。

2.2 target

代理的API地址，就是需要跨域的API地址。
地址可以是域名,如：http://www.baidu.com
也可以是IP地址：http://127.0.0.1:3000
如果是域名需要額外添加一個參數changeOrigin: true，否則會代理失敗。

2.3 pathRewrite

路徑重寫，也就是說會修改最終請求的API路徑。
比如訪問的API路徑：/api/users,
設置pathRewrite: {'^/api' : ''},后，
最終代理訪問的路徑：http://www.baidu.com/users，
這個參數的目的是給代理命名后，在訪問時把命名刪除掉。

2.4 changeOrigin

這個參數可以讓target參數是域名。

2.5 secure

secure: false,不檢查安全問題。
設置后，可以接受運行在 HTTPS 上，可以使用無效證書的后端服務器

2.6 其他參數配置查看http-proxy-middleware文檔

其他的配置參數等信息，可以查看這里：https://github.com/chimurai/h...