Vue-cli3中，开发环境下配置请求代理，解决开发过程中的跨域问题

vue开发过程中，我们在开发阶段，遇到后端接口跨域的问题，我们可以通过在vue.config.js中配置proxy来解决。

配置方案：

	// 作为配置文件，直接导出配置对象即可
	module.exports = {
	    devServer: {
	        port: 8888,
	        open: true,
	        
			// 此处为设置代理
	        proxy: {
	            '/api': {
	                // 你的真实的api地址,即真实接口地址
	                target: 'http://xxx.x.x.x:xxxx',
	                // 代理websocket
	                // ws: true,
	                changeOrigin: true,
					// 重写路径
	                pathRewrite: {
	                    '^/api': ''
	                }
	            }
	        }
	    }
	}

配置axios的baseUrl

	if (process.env.NODE_ENV == 'development') {
	    axios.defaults.baseURL = '/api';
	} else if (process.env.NODE_ENV == 'production') {
	    axios.defaults.baseURL = 'http://xxx.x.x.x:xxxx/';
	}

完成上面的配置后，即完成代理的配置。

总结

那么当我们在开发阶段发送一个http://localhost:8888/api/list请求，最终会被代理为http://xxx.x.x.x:xxxx/list。
上面的配置就是把带有/api的请求映射到你的target请求上。