vue项目vue.config.js devServer.proxy配置

devServer.proxy配置

在vue.config.js文件中

devServer: {
        before: require('./mock/index'),
        host: 'localhost',//target host
        port: 8080,
        //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
        proxy: {
            '/api': {
                target: 'http://172.16.xxx.xxx:8085',//代理地址，这里设置的地址会代替axios中设置的baseURL
                changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
                //ws: true, // proxy websockets
                //pathRewrite方法重写url
                pathRewrite: {
                    '^/api': '/'
                    //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                    //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
                }
            }
        }
    }

配置在很多地方都能查到，主要说说/api是什么意思

在我们axios发送请求时axios.get("/user/userinfo")，此次请求的地址是http://localhost：8080也就是我们的设置的baseURL

当请求axios.get("/api/user/userinfo"),此次请求地址被代理地址替代，为http://172.16.xxx.xxx:8085/user/userinfo