要求实现多套环境的丝滑切换（在不配置多套域名或更换访问链接的背景下）如何实现

背景：要求实现多套环境的丝滑切换（在不配置多套域名或更换访问链接的背景下），运维不配置多个域名的切换方式，服务端则g根据所选择的环境不同在接口前拼接对应的环境名称来适配在不同环境下的数据，不同环境的数据库是独立的。具体实例如下：

三套对应的环境是：

则服务器对应的访问同一页面的接口则变成了

域名+/prod/lxkj/lxrd+具体接口名称;

需求：前端在切换不同环境事，菜单栏要变化，主要变化为菜单栏的背景色调风格更换，还可以有水印提示在哪个环境；

分析： 1.环境的切换放在固定头部实现，这样在任意界面想切环境去做数据的操作都很方便； 2.抽离出菜单栏的配置，根据select的change事件去改变菜单栏风格； 3.接口拼接的变化，监听change事件，去改变axios的baseURL

具体实现：

1. 头部

 <div v-if="isShowEnv">
      <span style="padding-right: 10px;">选择环境:</span>
      <el-select v-model="envValue" placeholder="请选择的环境" clearable style="width: 200px" @change="hangleEnv">
        <el-option label="默认环境" value="prod">
        </el-option>
        <el-option label="xx科技" value="lxkj">
        </el-option>
        <el-option label="xx融担" value="lxrd">
        </el-option>

      </el-select>
    </div>

2. 菜单栏风格控制

//控制风格的输出
 const hangleEnv = (e) => {
    if (e) {
      let arr = ['theme1', 'theme2']
      if (e == 'lxkj' || e == 'prod') {
        store.dispatch('setting/setTheme', 'theme1');

      } else {
        store.dispatch('setting/setTheme', 'theme2');

      }
      
    }
  }

<template>
  <el-scrollbar height="100vh">
    <el-menu :default-active="defaultActive" :background-color="menuBgColor" :default-openeds="defaultOpened"
      :unique-opened="uniqueOpenedFlag" class="el-menu-vertical" :class="{ 'is-black': isBlack }" :collapse="isCollapse"
      :text-color="textColor" :active-text-color="activeTextColor" router :mode="mode">
      <Logo v-if="isLogo" />
      <template v-for="item in routes">
        <template v-if="!item.hidden">
          <MenuItem :item="{ ...item, isBlack }" :key="item.path" />
        </template>
      </template>
    </el-menu>
  </el-scrollbar>
</template>

 const theme = computed(() => {
    return store.getters['setting/theme'];
  });

  const menuBgColor = computed(() => {
    return themeOptions[theme.value].menuBgColor;
  });

  const isBlack = computed(() => {
    return whiteColors.indexOf(menuBgColor.value) === -1;
  });

  const textColor = computed(() => {
    // return whiteColors.indexOf(menuBgColor.value) !== -1 ? '#333' : '#fff';
    return themeOptions[theme.value].TextColor;
  });

  const activeTextColor = computed(() => {

    const mcolor = whiteColors.indexOf(menuBgColor.value) !== -1;
    return mcolor ? themeOptions[theme.value].HighlightColor : '#fff';
    // return themeOptions[theme.value].HighlightColor;
  });

3. axios的defaults.baseURL修改；

  import request from '@/utils/request.js';
const hangleEnv = (e) => {
    if (e) {
      let arr = ['theme1', 'theme2']
      if (e == 'lxkj' || e == 'prod') {
        store.dispatch('setting/setTheme', 'theme1');

      } else {
        store.dispatch('setting/setTheme', 'theme2');

      }
      if (process.env.NODE_ENV === 'production') {
        if (e != 'prod') {
          request.defaults.baseURL = 'https://sre.oa.fenqile.com/' + e
        } else {
          request.defaults.baseURL = 'https://sre.oa.fenqile.com'
        }

      }
      // WaterMark.set(`【${e}】_${userName.value}`)   //水印

      setTimeout(() => {
        handleRefresh();
        // console.log(prodEnv.value, '545454');
      }, 500)

    }
  }

总结：这里要点是改变全局的axios的defaults.baseURL就会化繁为简，同时简化了前后端以及运维的工作；