vue cli4配置多个baseUrl环境，axios涉及多个请求域的情况

前言

开发中经常会遇到axios请求涉及到多个请求域，我们打包后也希望不同的请求对应不同的域名

配置

第一步：

在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'

.env.production文件的配置，注意配置内容必须以VUE_APP开头，其余后缀可以自定义。在这里配置的内容，在项目任何地方都可以通过process.env.VUE_APP_xx读取

NODE_ENV='production'
VUE_APP_URL='http://dididi1:8088'
VUE_APP_URL_TWO='http://dididi2:8081'
VUE_APP_URL_THREE='http://dididi3:8080'

第二步：

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;

使用

//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);
}

完成

可以发现当在本地启动项目的时候，可以正确转发实现跨域