vue-cli4 如何配置代理跨域【附代码】

今天爱分享给大家带来vue-cli4 如何配置代理跨域【附代码】，希望能够帮助到大家。

vue-cli4 已经将build,config文件隐藏，不进行显示，那要如何配置代理呢？

1. 在根目录下，创建一个vue.config.js文件

2. 在vue.config.js文件中进行配置，代码如下

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: "http://localhost:8888",//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替
          //比如我要调用'http://40.00.100.133:3002/user/login'，直接写‘/api/user/login'即可
        }
      }
    }
  }
}

3. 配置后，一定要重启，ctrl+c 结束，在执行npm run serve执行，才会生效