前言

通常，我们在日常开发中，API可能由不同的后端程序员开发，代码就可能在不同电脑上，而已经上线的功能又在线上服务器上，线上服务器又可能分成测试服务器和正式服务器，总之一句话，前端开发中可能由N台PC或服务器提供API，所以我们的请求必须要指向不同PC或服务器，怎么办呢？

通常解决办法是配置Vue-CLI的devserver-proxy。

官方手册

https://cli.vuejs.org/zh/config/#devserver-proxy

官方手册很坑爹的好么？！不过，官方提供了一个页面，有更多的信息：

https://github.com/chimurai/http-proxy-middleware#proxycontext-config

但是依然很乱好么？！

整体上说，这个devserver-proxy的配置很有学问，很复杂，但是通常我们并不需要那么复杂的配置，今天就简单讲讲，够用即可。

范例

      [process.env.VUE_APP_BASE_API + '/hikvision']: {
        target: `http://192.168.9.50:8083`,
        changeOrigin: true,
        pathRewrite: {
         ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },

原理

1. process.env.VUE_APP_BASE_API是项目根目录的.env.development文件里配置的VUE_APP_BASE_API的值。如果真实API接口有自己的一个根目录，比如http://www.foo.com/api/xxx/ooo/12，那么，这里的/api就是API接口的根目录，你就必须在.env.development文件里配置VUE_APP_BASE_API的值为/api。

2. '/hikvision/'是你的真实API除去VUE_APP_BASE_API之后的path的第一段，因为一般API的path类似于/foo/bar、/foo/bar/12，所以/foo是一致的，这里只填/foo这种即可。

3. 总说这个数组，一般就放1个元素即可，这个元素就是匹配你的真实API的前一截。

4. target可以是后端程序员的IP、端口，如果，某个程序员给的接口，自己有一个自定义的根目录，比如他提供了一个API叫http://192.168.2.45:9527/jackyChan/foo/bar/12，这个jackyChan在正式服务器的API中是没有的，但是这个程序员任性，就喜欢加，那么，你写target应该是http://192.168.2.45:9527/jackyChan。如果这个程序员没这种癖好，只是http://192.168.2.45:9527/foo/bar/12，那么更简单，你应该写http://192.168.2.45:9527。
   可能你会问，键名中有'/hikvision'，那么target中要不要加'/hikvision'？
   请注意，键名中的'/hikvision'，只是为了表达“系统要匹配path包含'/hikvision'的API”，而不是说，系统会自主从'/hikvision'后面截断。

5. changeOrigin如实填写，跨域就true，没跨就false。

6. pathRewrite的作用是，真实API假如根目录叫/api，但是，后端开发者没有用这个目录，那么，你就必须在这做一个改写，这就是一个正则查找，将/api替换成空串。
   记得上面说的/jackyChan吗？假如服务器根目录是/api，后端程序员电脑提供的API根目录是/jackyChan，那么你除了在target写上/jackyChan这种办法之外，还有第2种方案，就是在pathRewrite里重写，将/api重写为/jackyChan，可以写成['^' + process.env.VUE_APP_BASE_API]: '/jackyChan'。

多条配置

将范例连续写2次，那么，系统会从第一条开始匹配，如果配上了就执行，配不上，就找第二条。

所以，你可以写N条，最后一条应该是“托底”的，能适应大部分请求的，上面的若干条应该是只针对个别接口的。

这样一来，你一个人可以对接N个程序员电脑、N个服务器的API，一点压力都没有。

如果一个服务器提供/foo/bar，另一个服务器提供/for/bar/12，那么，应该先写后者，后写前者。

后者的键名可以是：[process.env.VUE_APP_BASE_API + '/foo/bar/']
前者的键名可以是：[process.env.VUE_APP_BASE_API + '/foo/bar']

为什么？因为先写的必须是最详细的。

      [process.env.VUE_APP_BASE_API + '/system/base/']: {
        target: `http://192.168.9.22:9527`,
        changeOrigin: true,
        pathRewrite: {
         ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      [process.env.VUE_APP_BASE_API + '/system/base']: {
        target: `http://192.168.9.12`,
        changeOrigin: true,
        pathRewrite: {
         ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      [process.env.VUE_APP_BASE_API + '/hikvision']: {
        target: `http://192.168.9.50:808`,
        changeOrigin: true,
        pathRewrite: {
         ['^' + process.env.VUE_APP_BASE_API]: '/jackyChan'
        }
      },
      [process.env.VUE_APP_BASE_API]: {
        target: `http://192.168.9.33:8083`,
        changeOrigin: true,
        pathRewrite: {
         ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },

注意事项

每次修改完vue.config.js，都要重新yarn dev。