在@vue/cli3中使用porxy进行跨域请求

最近需要在Vue开发环境中用到进行跨域请求，整理了一下proxy

用料：vue-cli3，http-proxy-middleware，@vue/cli-service，axios

1. 首先对于cli3版本来说，在根目录下少了build和config目录，那么这时候就需要去手动创建 vue.config.js 来配置。

//文件中格式如下
module.exports = {
  devServer:{
      proxy:{
          "/api":{                        //设置跨域变量代号
              target:"https://m.mi.com/", //你想要代理的目标源链接
              changeOrigin:true,          //开启代理
              pathRewrite:{               //设置二级
                  "^/api": "/",           
                  "^/api2": "/body"
              }
          }
      }
  }
}

2. 接下来需要安装sevice（如果已经存在，请忽略），会自动去匹配 vue.config.js 中是否有指定的链接字段

npm install @vue/cli-service --save

3. 使用。比如在axios中使用。

    method:'post',
    url:"/api/v1/home/page",
    headers:{
        'Content-Type':'application/x-www-form-urlencoded'
        
    }
})

那么实际在使用的时候，虽然还是显示的是localhost8080,但是实际已经被替换过了

替换成功后，显示的是localhost，但是其实是自己设置的代理链接