修改Vue2项目运行端口号配置后端代理

一.端口号简单配置

在Vue2项目的vue.config.js文件中增加如下配置：

module.exports={
//...

devServer:{

port:8888//此处修改你需要的端口号

}

二.配置proxy代理

1.简单配置单个代理

请求到/api/xxx现在会被代理到请求 http://localhost:8888/api/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:8888/api/user

modile.exports={

//...
devServer:{

    proxy:{

    '/api':'http://localhost:8888'

        }

    }

}

2.配置多个代理路径

将多个路径代理到同一个target下，你可以使用由一个或多个具有context属性的对象构成的数组：

module.exports = {
    //...
    devServer: {
        proxy: [{
                context: ['/auth', '/api'],
                target: 'http://localhost:8888',
              
            }]
    }
};

 3.解决跨域问题

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8888',
                changeOrigin: true,//开启代理：在本地会创建一个虚拟服务端，然后                        
                                               //发送请求的数据，并同时接收请求的数据，这样服务                                                                        
                                               //端和服务端进行数据的交互就不会有跨域问题
            }
        }
    }
};