Vue_webpack-dev-server跨域(proxy)

1、更方便的解决方案

  根据官方文档的描述，devServer配置被要求在manifest.json去配置，并且由于这个配置文件是json格式的，所以只能对简单类型进行配置。但对于proxy这项配置来说也是足够了的。

  manifest.json文件

// manifest.json
{
    "h5": {
        "devServer": {
            "proxy": {
                "/prefix/api/user/list": {
                    "target": "https://api-remote.xxxx.com",
                    "pathRewrite": {
                        "^/prefix": ""
                    }
                }
            }
        }
    }
}

2、另一种解决方案

  直接创建一个vue.config.js文件，并在里面配置devServer，直接上代码

  vue.config.js文件

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/prefix/api/user/list': {
        target: 'https://api-remote.xxxx.com',
        pathRewrite: {
          '^/prefix': ''
        }
      }
    },
  }
}

  这种办法的好处显而易见，用js而非json去配置会更加的灵活，需要注意的是以上两种方案不能同时使用，第一种会覆盖第二种方案。

作者：前端论道
链接：https://juejin.cn/post/6844904063855755271
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。