1、在vue.config中,找到devServer
在devServer中配置proxy,例:
devServer: {
port: port,
open: true,
proxy: {
// /api 是程序员自定义的一个字符串(可以是任意的)
// 代表是请求的基准路径,如果请求的基准路径是 /api,才会执行代理转发
// 这个 /api 是指设置的请求基准路径,所以需要将 VUE_APP_BASE_API 设置为 '/api'
'/dev_api': {
// target 是后端服务器(目标服务器、数据服务器)地址
// 注意事项:请求的基准路径 /api,在触发代理转发的时候,会自动拼接到 target 地址后面
// 也就是:http://8.131.91.46:6868/api
// 所以需要将接口地址前面的 /api 去掉才可以,否则 http://8.131.91.46:6868/api/api 会多一个 /api
target: 'http://ihrm.itheima.net',
// target: 'http://ihrm-java.itheima.net',
// 是否跨域请求,一般设置为 true 即可,只要设置为 true,才是真正的跨域请求
changeOrigin: true,
// 项目中接口的请求前缀是 /api,但是目前我们将请求的基准路径换成了 /dev_api
// 那么 /dev_api 就会拼接到 url 地址后面:http://8.131.91.46:6868/dev_api
// 这个拼接以后,请求地址是错误的,我们需要把 /dev_api 再次改成 /api 才可以,这时候就用到了【路径重写】
pathRewrite: {
// 键值形式配置
// 键:当前请求基准路径,就是对谁进行重写,值:需要替换的值
'^/dev_api': '/api' // 配置好以后,就把路径重新改为了 http://8.131.91.46:6868/api
}
}
}
// before: require('./mock/mock-server.js')
},
配置好后,在.env.development中,配置VUE_APP_BASE_API = '/dev_api' 即可