大型前端应用如何做系统融合？

├── root
│   ├── mocks
│   ├── public
│   ├── src
│   │   ├── api
│   │   │   ├── apiA      // 存储 A 业务请求接口
│   │   │   ├── apiB       // 存储 B 业务请求接口
│   │   │   ├── apiC         // 存储 C 业务请求接口
│   │   │   ├── baseHttp.js   // 封装基础请求
│   │   │   ├── ARequest.js   // A业务的公共处理，请求header和响应code码等处理
│   │   │   ├── BRequest.js  //  B业务的公共处理，请求header和响应code码等处理
│   │   │   ├── CRequest.js   // C业务的公共处理，请求header和响应code码等处理
│   │   │   ├── DRequest.js  //  D业务的公共处理，请求header和响应code码等处理
│   │   ├── assets
│   │   │   ├── icons     // icon内容
│   │   ├── common
│   │   │   ├── config
│   │   │   ├── styles      // 一些公共的样式
│   │   ├── components      // 公共组件
│   │   ├── directive       // 自定义指令
│   │   ├── layout        //公共布局
│   │   ├── router
│   │   │   ├── a.js   // 对应a应用
│   │   │   ├── b.js   // 对应b应用
│   │   │   ├── c.js   // 对应c应用
│   │   │   ├── index.js
│   │   ├── store
│   │   │   ├── modules
│   │   │   ├── getters.js
│   │   │   ├── index.js
│   │   ├── utils   
│   │   ├── views
│   │   │   ├── a    // a 业务文件
│   │   │   ├── b    // b 业务文件
│   │   │   ├── c    // c 业务文件
│   │   ├── main.js
│   │   └── App.vue
│   ├── env
│   ├── package.json

let APPLICATION_TYPE = 'a'
let host = window.location.host;

// 维护域名列表，包含测试和线上环境
const A_HOST = ['a.com','a_pre.com']
const B_HOST = [] 
const C_HOST = []
const D_HOST = []

if(A_HOST.includes(host)){
    APPLICATION_TYPE = 'a'
}else if(B_HOST.includes(host)){
    APPLICATION_TYPE = 'b'
}else if(C_HOST.includes(host)){
    APPLICATION_TYPE = 'c'
}else if(D_HOST.includes(host)){
    APPLICATION_TYPE = 'd'
}
// 挂载全局
window._APPLICATION_TYPE = APPLICATION_TYPE

根据全局的 APPLICATION_TYPE 字段识别

let router=[
{
    path: '/home',
    component: Layout,
    meta: {  title: '首页', icon: 'el-icon-s-grid', alwaysShow: true },
    redirect: '/home',
    children: [
      {
        path: '/home',
        component: () => import('@/views/home/index'),
        name: 'home',
        meta: { title: '首页', icon: ''}
      }
    ]
  }
]

let RouterApi={'a':'/api1','b':'/api2','c':'api3'}
api.get(RouterApi[APPLICATION_TYPE])
component='各个应用文件名'+接口返回路径

import dRouter from './d.json'
if(APPLICATION_TYPE==='d'){
   router=dRouter
}

# .env.pruduction

# a 业务
VUE_APP_A_BASEURL = ''   
# b 业务
VUE_APP_B_BASEURL = ''
# c 业务
VUE_APP_C_BASEURL = ''
# d业务
VUE_APP_D_BASEURL = ''

// 公共请求封装  baseHttp.js
export const createHttp = (baseUrl, successFun = () => {}, errorFun = () => {}, requestInterceptor = () => {}) => {
  const http = axios.create({
    baseURL: baseUrl,
    timeout: 5 * 60 * 1000,
    withCredentials: true
  })
  // http request 拦截器
  http.interceptors.request.use(
    async config => {
      await requestInterceptor(config)
      return config
    },
    err => {
      return Promise.reject(err)
    }
  )
  // http response 拦截器
  http.interceptors.response.use(successFun, errorFun)
  return http
}

//A业务基础请求 
function requestInterceptor(){
    // A系统公共请求参数处理... 
}
function successFn(){
    // A系统公共响应结果处理 统一新增
}
function errorFn(){
    // A共异常处理 包括code码等情况
}
export default createHttp(baseUrl,successFn,errorFn,requestinterceptor)

// A业务请求调用
ARequest.get(url,{params:data})

//B业务请求调用
BRequest.post(url,{params:data})