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來作的代理配置，一些自定義配置能夠移步到官網去進行參考。