vue-cli 3.x配置跨域代理

写在前面

vue-cli 3.x 的beta版本已经发布了一段时间，很早就像体验一番一直找不到时间。这些日子恰好有空就想着依照网上的一些例子练下手，刚一上手就踩到坑了。
3.x 版本对整个项目的构建都有很大的改动，项目的默认配置整个都转移到CLI service里去了，从而全部的配置文件在初始化的项目中并无生成。初次生成项目的时候可谓是彻底懵的，不管是baidu仍是google，对于3.x的介绍几乎就没有，仅有的一些也只是项目的一些生成流程，那怎么办，只能靠本身瞎整了。
既然没有现成的（做为一个伸手党我仍是很自觉的认可了），那就只能去扒官方文档了，慢慢啃。这可就苦了我这个英语战斗力只有5的渣了，凭借着百度翻译和谷歌翻译，而后夹杂着本身的一些猜测，好歹是把基本的给整明白了一点点。

因为文笔实在太烂了，多余的废话就不说了，直接上干货。

跨域代理配置

因为3.x的默认配置都转移到了CLI service里，因此生成的项目中并无配置项，咱们若是须要自定义一些项目配置，则须要本身在项目的根目录(root)建立一个vue.config.js。vue.config.js里的配置项全部都是可选的，这就避免了咱们去看一大堆没必要要的默认配置，只须要配置本身须要的部分就好了。【官方文档】

---

因为baseUrl也是关联的部署目录，咱们需求的仅仅是开发环境的变量，因此尽量的咱们不动baseUrl这个变量以避免部署的时候出现问题。因此这里配置稍做修改。

需求上是咱们只须要在开发环境配置跨域代理，因此咱们能够在开发环境的配置上加上可以代理上的环境变量便可。官方提供了环境变量的配置方案。

在项目的根目录，咱们建立一个.env.development文件来作开发环境的变量设置。

咱们在.env.development文件下设置变量VUE_APP_BASE_API=/api便可将devServer的proxy重写的url赋值给VUE_APP_BASE_API，咱们仅需在axios的封装方案上使用VUE_APP_BASE_API这个变量，就能够对应上devServer设置的变量。

// vue.config.js
module.exports = {
    // 修改的配置
    // 将baseUrl: '/api',改成baseUrl: '/',
    baseUrl: '/',
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.example.org',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api': ''
                }
            }
        }
    }
}
// .env.development
VUE_APP_BASE_API=/api

---

这里依然是采用的http-proxy-middleware来作的代理配置，一些自定义配置能够移步到官网去进行参考。