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