vue.config.js文件配置devServer和devServer.proxy多个代理地址

如何在vue.config.js文件配置属性devServer和devServer.proxy配置多个代理地址,如下所示:
比如:封装请求方法格式(可以略过)
vue.config.js文件配置devServer和devServer.proxy多个代理地址_第1张图片

module.exports = {
	outputDir: '../dist', //打包后输出文件名称(以及位置)
	open:true, //启动服务后是否打开浏览器
	host:'localhost', // 运行的域名主机,地址栏看得到的地址
	port: 80, //指定要监听请求的端口号,可以用window.location.port获取到;
	https: false, //false为http访问,true为https访问,默认false
	lintOnSave:true, //设置是否在开发环境下每次保存代码时都启用eslint验证
	productionSourceMap: false, // 生产环境是否生成sourceMap文件,设置为false,打包后体积可缩小一半
	//重点配置
	devServer:{
		proxy:{
			'/api':{
				target: 'http://192.168.1.1:8070', //代理的服务器,也就是api要访问的服务器,这里写真实的请求url
				ws:true,    //是否启用websockets
				changOrigin: true, //true,将主机头的来源更改为目标URL,也就是是否允许跨域。开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
				pathRewrite: {    //重写代理路径
 					'^/api': ''  //如果你访问的是'http://192.168.1.1:8070/api/shop/car' ,则变为 'http://192.168.1.1:8070/shop/car'。浏览器控制台虽然看到的还是带有/api的,但是实际发给后端的地址是没有包含/api的
 			 	}
			},
			//有时候系统有多个不同的代理地址,我们可以加一份代理即可!
			'/test':{
				target: 'http://192.168.1.1:8092',   //这里写真实的请求url
				ws:true,    //是否启用websockets
				changOrigin: true, //允许跨域 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
				pathRewrite: {    //重写代理路径
 					'^/test': ''  //如果你访问的是'http://192.168.1.1:8092/api/shop/car' ,则变为 'http://192.168.1.1:8092/shop/car'。浏览器控制台虽然看到的还是带有/test的,但是实际发给后端的地址是没有包含/test的
 			 	}
			}
		}
	},
	//其他一些配置
	configureWebpack(config) {
	    config.entry.app = ["./src/main.js"];
	    // 判断为生产模式下去掉console,开发模式可以保存console看
	    if (process.env.NODE_ENV === "production") {
	    	config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
	    }
	  },
}

注意:只要修改到或新增该文件的地址,都必须重新启动服务才能生效!

你可能感兴趣的:(vue.js,javascript,前端)