代理环境切换组件

问题

在公司里我们联调的过程中，需要将本地请求代理到测试环境中；
Vue项目中，采用devServer.proxy对代理进行配置；

devServer: {
// xxx为代理内容
    proxy：{
		'/*':{
			ws：false，
			target:'docker33-www.baidu.net',
			changeOrigin:true
		}
	}
    port: 8088,
  },

该例子是将所有请求都代理到test33-www.baidu.net；
所以我们修改代理环境时，需要重新配置traget的值，再重跑一遍项目。

效果

现在我们想实现，在本地联调时，不需要重跑项目就能实现环境的切换

实现

我的项目里用的是axios请求，而axios有一个default.baseUrl属性，该属性的值会自动添加在我们的请求url中；
在proxy代理中可以通过请求的url起那么不一样的字段，将他们代理到不同的环境中，实现不用重新配置proxy就能自动切换代理环境。

构造proxy配置内容

// 所有测试环境
const env = ['docker30', 'docker31', 'docker32', 'docker33', 'docker34', 'docker35',
  'docker36', 'docker37', 'docker38', 'docker39', 'docker40', 'docker41'];

// 重写路径
function getRewrite(a, b) {
  const rewrite = {};
  rewrite[a] = b;
  return rewrite;
}

// 构造proxy配置
function proxy() {
  const rules = {};
  for (let i = 0; i < env.length; i++) {
    rules[env[i]] = {
      ws: false,
      target: `${env[i]}-www.baidu.net`,
      pathRewrite: getRewrite(`^/${env[i]}`, ''),
      changeOrigin: true,
    };
  }
  return rules;
}

module.exports = proxy();

配置vue.config.js

module.exports = {
 devServer: {
    disableHostCheck: true,
    proxy,
    port: 8088,
  }
 }

环境切换组件（在引用它的地方，判断当前是否是本地，如果是本地再展示）

<template>
  <div>
    <hn-popover
      placement="left"
      width="150"
      trigger="click">
      <hn-radio-group
        v-model="radio">
        <hn-radio
          class="radioBox"
          :label="item"
          :key="item"
          @change="change"
          v-for="item in options">{{ item }}</hn-radio>
      </hn-radio-group>
      <hn-icon
        name="setting"
        size="20px"
        slot="reference" />
    </hn-popover>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      options: [
        'docker30',
        'docker31',
        'docker32',
        'docker33',
        'docker34',
        'docker35',
        'docker36',
        'docker37',
        'docker38',
        'docker39',
        'docker40',
        'docker41',
      ],
      radio: '',
    };
  },
  mounted() {
    this.radio = window.sessionStorage.getItem('env') || 'docker34';
  },
  methods: {
    change() {
      window.sessionStorage.setItem('env', this.radio);
      axios.defaults.baseURL = this.radio;
    },
  },
};
</script>
<style scoped>
.radioBox{
  margin: 5px 20px;
}
</style>

实现效果如下：