一个vue项目中配置请求多个服务端解决方案

• 问题描述

帅哥A（后端）：雷雷，给这个项目开两个端号，我和BB明天都要同时用哦！

本人：！！！！什么，没听说过，，，，，（疯狂找资料，问deepseek中.......怎样一个vue项目中配置请求多个服务端？？）

• 解决方法：设置多个服务器选择端口

1、在本地项目全局设置一个端口号选择器。

<template>
  <div class="ProxyUrl">
    <el-select
      v-model="url"
      size="small"
      style="width: 80px"
      @change="changeUrls"
    >
      <el-option
        v-for="item in urlsData"
        :key="item.url"
        :label="item.name"
        :value="item.url"
    /></el-select>
  </div>
</template>

<script setup>
import { ref} from "vue";
import Cookies from 'js-cookie'//需要下载cookies

//服务器端口号名称（url）前端自定义区分；name为相对应后端的端口号（后端给的）
const urlsData = ref([
  {
    url: "/wk",
    name: 201,
  },
  {
    url: "/tj",
    name: 220,
  },
]);
//需要把Cookies.get('serverPeople')定义在前方，否则会导致一直是'/tj'服务器
const url = ref(  Cookies.get('serverPeople')||'/tj' );
//设置更换服务器端口号事件
const changeUrls=(value)=>{
console.log('切换端口',value);
Cookies.set('serverPeople', value)
url.value= value
}
</script>

2、导入父组件（该子组件按实际情况导入父组件，作者项目需要全局设置，所以直接导入App.vue中了）

注意：该功能一般只用于本地项目，需要上线的项目需要做判断是否显示该组件，不能直接在组件上v-if="window.location.host === '192.168.0.247:5173'"判断，会报错，这时候页面还没有渲染成功，所以要等页面dom渲染成功后再使用v-if判断，使用onMounted解决。

（不在App.vue导入没有这个问题）

<script setup>
import { ref, onMounted } from 'vue';
import { RouterLink, RouterView } from 'vue-router'
import ProxyUrl from "./views/Layout/ProxyUrl.vue"

// 定义一个响应式变量用于控制proxyUrl盒子的显示
const showProxyUrl = ref(false);
onMounted(() => {
  // 检查当前host是否为指定值，192.168.0.247:5173为当前自己启动项目的端口号
  if (window.location.host === '192.168.0.247:5173') { // 注意这里的IP和端口号需要按照实际情况调整
    showProxyUrl.value = true;
  }
});
</script>

<template>
  <RouterLink to="/">
  </RouterLink>
  <RouterView />
   <!-- 切换端口号 -->
   <div class="proxyUrl" v-if="showProxyUrl">
      <ProxyUrl />
    </div>
</template>

<style>
.proxyUrl {
  position: fixed;
  bottom: 150px;
  right: 25px;
  z-index: 9;
}

3、vite.config.js文件更改代理指向。

tj和wk为前端自定义名称。

注意：vue3代码下图

server: {
    host: '0.0.0.0', //服务器主机名，可以外部访问
    port: 5173,
    https: false,
    open: false, //编译完自动打开网页
    proxy: {
       '/tj': {
        target: 'http://192.168.0.220:10666', //tj这个人
        ws: true,
        changeOrigin: true, //允许跨域
        secure: false ,//如果是https接口，需要配置这个参数
        rewrite: (path) => path.replace(/^\/tj/, ''), // 去掉 /tj 前缀
      },
      '/wk': {
        target: 'http://192.168.0.201:10666',  //wk这个人，
        ws: true,
        changeOrigin: true, //允许跨域
        secure: false ,//如果是https接口，需要配置这个参数
        rewrite: (path) => path.replace(/^\/wk/, ''), // 去掉前缀
      },
    }
  }

vue2项目,（tj与wk只是前端用于做一个标识，不传给后端，所以需要删除）v2和v3的删除不一样

server: {
    host: '0.0.0.0', //服务器主机名，可以外部访问
    port: 5173,
    https: false,
    open: false, //编译完自动打开网页
    proxy: {
       '/tj': {
        target: 'http://192.168.0.220:10666', //许挺键
        ws: true,
        changeOrigin: true, //允许跨域
        secure: false ,//如果是https接口，需要配置这个参数

         pathRewrite: {
          '^/tj': ''
        }

      },
      '/wk': {
        target: 'http://192.168.0.201:10666',  //侯文珂
        ws: true,
        changeOrigin: true, //允许跨域
        secure: false ,//如果是https接口，需要配置这个参数

           pathRewrite: {
          '^/wk': ''
        }

      },
    }
  }

4、请求拦截器全局配置封装接口，（若跟作者封装思路不一样，则直接在接口上面写，思路就是使用拼接接口就OK）

5、实现效果

ps:能调通接口，且路由调换有自己自定义的名称就算成功