本地[vue]对接两个服务器地址怎么配置

在Vue.js项目中，如果你需要同时从两个不同的服务器地址获取数据，你可以通过修改Vue实例的`axios`配置来实现。Axios是一个流行的基于Promise的HTTP库，适用于浏览器和Node.js环境。

首先，在你的Vue应用中安装axios如果还没有的话：

npm install axios
# 或者
yarn add axios

然后，在你的Vue组件、主入口文件（通常是main.js或src/main.ts）或者其他合适的配置位置，设置axios的baseURL或者interceptors来适应不同的服务器地址。这里有两个示例：

1. 如果你想在请求前切换服务器地址，可以在创建axios实例时动态设置：

import axios from 'axios';

// 创建axios实例并设置默认基础URL
const instance = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? 'https://api.production.com' : 'https://api.development.com',
});

instance.interceptors.request.use(
  (config) => {
    // 检查环境变量来决定访问哪个地址
    if (process.env.VUE_APP_API_URL === 'secondary') {
      config.baseURL = 'https://api.secondary.com';
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default instance;

2. 如果你需要频繁地在两个服务器之间切换，可以考虑使用Vue的生命周期钩子配合状态管理（如Vuex）来控制：

import Vue from 'vue';
import axios from 'axios';
import { mapState } from 'vuex';

// 定义一个getApiUrl辅助函数
const getApiUrl = (isPrimary) => {
  return isPrimary ? 'https://api.production.com' : 'https://api.secondary.com';
};

export default {
  computed: {
    ...mapState(['primaryFlag']), //假设你有一个名为primaryFlag的状态在Vuex中
    apiUrl() {
      return getApiUrl(this.primaryFlag);
    },
  },
  created() {
    this.$axios.defaults.baseURL = this.apiUrl;
  },
};

在上述代码中，你可以根据`primaryFlag`的状态（例如在Vuex中存储为true或false）来改变axios的默认baseURL。