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

完成

可以發現當在本地啟動項目的時候，可以正確轉發實現跨域