【Antd+Vue】Antd Pro如何配置代理，webpack devServer怎么用

一、抛出问题

使用Antd Pro of Vue进行开发的时候，难免会遇到一个问题：我前端开发的地址和请求的接口地址域名不一样啊，这可咋整？我要怎么统一处理接口前缀？？

二、理论解答

官网怎么说？

关于如何代理到后端服务器，官网是这么说的：Ant Design Pro 使用了 vue-cli3，采用 webpack devServer 来支持代理，请阅读 vue-cli 和 webpack 官方文档。

我的总结：3步理解webpack devServer

说实话，当初还是小小小白的我，看完官网的解答还是有点懵逼的。在爬过一系列坑之后成功解决了这个问题，并做了以下总结：

首先，关于webpackdevServer我们要知道清楚下面3点：

1. 使用场景（where）：开发环境与线上环境请求的接口可能不一样，此时，需要进行请求转发 。
2. 为什么用它（why）：这玩意对跨域做了配置（使用http-proxy-middleware来实现），允许跨域发送请求
3. 什么时候生效（when）：配置devServer下的proxy配置项，只有在开发环境才生效。（线上环境没有devServer，因此proxy也不会生效）

三、代码实践 – 配置不同环境下axios事例的baseURL

在项目的src\utils\request.js文件，可以看到axios 实例的baseURL是由VUE_APP_API_BASE_URL这个变量决定的。

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
  timeout: 6000 // 请求超时时间
})

开发环境

1. 在.env.development文件，可以看到VUE_APP_API_BASE_URL为/api。（无需修改该文件）
2. 在vue.config.js文件，开启代理。
3. 在src\main.js文件，去掉mock。

// .env.development
NODE_ENV=development
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=/api

// vue.config.js文件，补充proxy相关代码--author by Emily
devServer: {
    disableHostCheck: true, // 解决vue项目中的“Invalid Host header”问题
    port: 8000, // development server port 默认8000，这个得看你的项目申请的端口号是多少而定
    // 如果需要开启代理，请移除mockjs /src/main.jsL11
    proxy: {
      '/api': { // 捕获API的标志，如果API中有这个字符串，那么就开始匹配代理
        target: 'http://www.baidu.com', // 地址可以是域名，也可以是IP地址。比如API请求/api/getList, 会被代理到请求http://www.baidu.com/api/getList 。
        ws: false,
        changeOrigin: true, // 如果target是域名需要额外添加一个参数changeOrigin: true，否则会代理失败。
        pathRewrite: {
          '^/api': '' // 路径重写，会修改最终请求的API路径。这里是用空字符串替换/api。比如访问的API路径：/api/getList,最终代理访问的路径：http://www.baidu.com/getList
        }
      }
    }
  },

// main.js
...
// import './mock' // 去除它 可完整的将项目中的 mock 拦截去除

生产环境

在生产环境，是不会走devServer的。因此，关注点应放在修改.env文件的VUE_APP_API_BASE_URL。

// .env 文件
NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=''

注意：修改完配置文件，需要重启项目，才能让效果生效