前言
开发中经常会遇到axios请求涉及到多个请求域,我们打包后也希望不同的请求对应不同的域名
配置
1.创建文件
在vue项目的根目录下创建2个文件.env.development和.env.production。在开发过程中,项目会自动读取development文件的配置,在打包时项目会自动读取production文件的配置
.env.development文件的配置,注意配置内容必须以VUE_APP开头,其余后缀可以自定义。在这里配置的内容,在项目任何地方都可以通过process.env.VUE_APP_xx读取
NODE_ENV='development'
VUE_APP_URL='/api'
VUE_APP_URL_TWO='/jh'
VUE_APP_URL_THREE='/one'
2.env.production文件的配置
注意配置内容必须以VUE_APP开头,其余后缀可以自定义。在这里配置的内容,在项目任何地方都可以通过process.env.VUE_APP_xx读取。同理配置evn.development文件
NODE_ENV='production'
VUE_APP_URL='http://dididi1:8088'
VUE_APP_URL_TWO='http://dididi2:8081'
VUE_APP_URL_THREE='http://dididi3:8080'
3.axios配置
创建一个axios对象,对每个域名做处理
import axios from 'axios';
const http=axios.create({
baseURL:process.env.VUE_APP_URL,
timeout:30000
})
//请求拦截,在每个请求发出去之前,针对每个域名做不同的配置
http.interceptors.request.use(config=>{
if(config.requestBase=='VUE_APP_URL'){
config.headers['Content-Type']="application/x-www-form-urlencoded";
}else if(config.requestBase=='VUE_APP_URL_TWO'){
config.headers['Content-Type']="application/json";
config.baseURL=process.env.VUE_APP_URL_TWO;
config.data=JSON.stringify(config.data);
}else if(config.requestBase=='VUE_APP_URL_THREE'){
config.baseURL=process.env.VUE_APP_URL_THREE;
}
return config;
})
export default http;
4.使用
//http://localhost:8080/api/xxx2
import http from '@/utils/http';
export const findBaseByIDHttp=function(data){
let params={
method:'post',
url:'/xxx2',//写/api后的部分
requestBase:'VUE_APP_URL',//用于拦截器判断
data
}
return http(params)
}
export const picrealtransferHttp=function(data) {
let params={
method:'post',
url:'/xxx',
requestBase:'VUE_APP_URL_TWO',
data
}
return http(params);
}
export const jiaoYiHttp=function(data) {
let params={
method:'get',
url:'/xxx',
requestBase:'VUE_APP_URL_THREE',
params:data
}
return http(params);
}
5.完成
可以发现当在本地启动项目的时候,可以正确转发实现跨域