如何在vue.config.js文件配置属性devServer和devServer.proxy配置多个代理地址,如下所示:
比如:封装请求方法格式(可以略过)
module.exports = {outputDir: '../dist', //打包后输出文件名称(以及位置)open:true, //启动服务后是否打开浏览器host:'localhost', // 运行的域名主机,地址栏看得到的地址port: 80, //指定要监听请求的端口号,可以用window.location.port获取到;https: false, //false为http访问,true为https访问,默认falselintOnSave:true, //设置是否在开发环境下每次保存代码时都启用eslint验证productionSourceMap: false, // 生产环境是否生成sourceMap文件,设置为false,打包后体积可缩小一半//重点配置devServer:{proxy:{'/api':{target: 'http://192.168.1.1:8070', //代理的服务器,也就是api要访问的服务器,这里写真实的请求urlws:true, //是否启用websocketschangOrigin: 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', //这里写真实的请求urlws:true, //是否启用websocketschangOrigin: 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].press.drop_console = true;}},}
注意:只要修改到或新增该文件的地址,都必须重新启动服务才能生效!
如果觉得《vue.config.js文件配置devServer和devServer.proxy多个代理地址》对你有帮助,请点赞、收藏,并留下你的观点哦!