vue-cli3 跨域配置

Posted 2021-03-25 jinsuo

跨域代理配置

由于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来做的代理配置，一些自定义配置可以移步到官网去进行参考。