Vue devServer.proxy代理配置详解

const proxy = require('http-proxy-middleware');

module.exports = {   
    devServer:{
        host: 'localhost', //target host
        port: 8080,
        //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
        proxy:{
            '/api':{
                target: 'http://192.168.1.30: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': {}，就是告诉node, 我接口只要是’/api’开头的才用代理，所以你的接口就要这么写 /api/xx/xx. 最后代理的路径就是 http://xxx.xx.com/api/xx/xx.
pathRewrite的作用是因为正确的接口路径是没有/api的，所以需要用'^/api': '/'，表示请求接口时去掉api