在@vuecli3或4搭建的项目中:
在vue.config.js中配置devServer选项
devServer: {
// host: 'localhost',
port: 8090, //项目运行的端口号
open: true, //配置自动启动浏览器
proxy: {
"/opAdmin": {
target: "http://116.66.65.193:8081", //对应服务端的接口地址
changeOrigin: true, // 开启跨域
pathRewrite: {
"^/opAdmin": "/opAdmin" //将以 /opAdmin 开头的接口重写http://116.66.65.193:8081/opAdmin ,调用时直接以 /opAdmin开头即表示调用http://116.66.65.193:8081/opAdmin
// "^/opAdmin": "/" //将以 /opAdmin 开头的接口重写http://116.66.65.193:8081/ ,调用时直接以 /opAdmin开头即表示调用http://116.66.65.193:8081/
// "^/opAdmin": "" //将以 /opAdmin 开头的接口重写http://116.66.65.193:8081 ,调用时直接以 /opAdmin开头即表示调用http://116.66.65.193:8081
}
},
"/DoorStatus": {
target: "http://47.99.11.102:8088", //对应服务端的接口地址
changeOrigin: true
}
}
}
如果不配置pathRewrite,则默认是使用当前值重写当前值,即:请求'/opAdmin/getList'实际请求的是'http://116.66.65.193:8081/opAdmin/getList'
如果配置pathRewrite:{"^/opAdmin": "" },则当前值可以看做是一个代替域名的东西,即:请求'/opAdmin/getList'实际请求的是'http://116.66.65.193:8081/getList'
注意:该配置只能在开发环境中使用,正式环境还是要换其他方法,比如后端设置可以跨域,nginx反向代理,前端使用jsonp处理跨域