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

Dear 丶 2022-03-29 14:18 225阅读 0赞

## 写在前面 ##

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]。`vue.config.js`里的配置项所有都是可选的，这就避免了我们去看一大堆不必要的默认配置，只需要配置自己需要的部分就行了。【[官方文档][Link 1]】

--------------------

由于baseUrl也是关联的部署目录，我们需求的仅仅是开发环境的变量，所以尽可能的我们不动baseUrl这个变量以免部署的时候出现问题。所以这里配置稍作修改。

需求上是我们只需要在开发环境配置跨域代理，所以我们可以在开发环境的配置上加上能够代理上的环境变量即可。官方提供了[环境变量][Link 2]的配置方案。

在项目的根目录，我们创建一个`.env.development`文件来做开发环境的变量设置。

我们在`.env.development`文件下设置变量`VUE_APP_BASE_API=/api`即可将devServer的proxy重写的url赋值给VUE\_APP\_BASE\_API，我们仅需在[`axios`][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][]来做的代理配置，一些自定义配置可以移步到官网去进行参考。

## 后记 ##

第一次写文档，之前都是伸手养成了懒得习惯，现在因没有可伸手的，就自己撸了，同时以此便利萌新以及也在踩坑的小伙伴。希望能帮到大家。

原文章链接地址：[https://segmentfault.com/a/1190000014474361?utm\_source=channel-hottest][https_segmentfault.com_a_1190000014474361_utm_source_channel-hottest]

[CLI service]: https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md
[vue.config.js]: https://github.com/vuejs/vue-cli/blob/dev/docs/config.md
[Link 1]: https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
[Link 2]: https://github.com/vuejs/vue-cli/blob/dev/docs/env.md
[axios]: https://github.com/axios/axios
[http-proxy-middleware]: https://github.com/chimurai/http-proxy-middleware#proxycontext-config
[https_segmentfault.com_a_1190000014474361_utm_source_channel-hottest]: https://segmentfault.com/a/1190000014474361?utm_source=channel-hottest