axios调用多个服务器数据在一个vue-cli项目中，而且还要开发和线上不一样。_vue项目 axios.post 后面加不同服务器

先了解这个  .env.development和 .env.production文件

1，关于文件名：必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件

　　.env 全局默认配置文件，不论什么环境都会加载合并

　　.env.development 开发环境下的配置文件

　　.env.production 生产环境下的配置文件

2，关于内容

　　注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX

一般我们做项目都会用axios的拦截器功能。去做一些配置啊，什么的。比如这样

import axios from 'axios';
// 重点就是这里 取的就是前边提到的.env.development和 .env.production文件
// 取决于环境变量或者说你运行的时候是哪个。
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 300000 // request timeout
});
 
service.interceptors.request.use(
  config => {
    if (!config.headers['X-Token']) {
      config.headers['X-Token'] = `${store.getters.token || ''}`;
    }
    if (!config.headers['language']) {
      config.headers['language'] = `${store.getters.language}`;
    }
    return config;
  },
  err => Promise.reject(err)
);
 
// response interceptor
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.errno === 5011) {
      store.dispatch('FedLogOut');
      window.location.reload();
      return Promise.reject('error');
    }
    if (res.errno === 501) {
      Toast.fail(I18n.t('requestErrText.pleaseLogin'));
      store.dispatch('FedLogOut');
      setTimeout(() => {
        // window.href = '/login/';
        router.push({
          name: 'login'
        });
      }, 1500);
      return Promise.reject('error');
    } else if (res.errno === 502) {
      Toast.fail(I18n.t('requestErrText.insetErr'));
      return Promise.reject('error');
    }
    if (res.errno === 401) {
      Toast.fail(I18n.t('requestErrText.paramesErr'));
      return Promise.reject('error');
    }
    if (res.errno === 402) {
      Toast.fail(I18n.t('requestErrText.keyErr'));
      return Promise.reject('error');
    } else if (res.errno !== 0) {
      // 非5xx的错误属于业务错误，留给具体页面处理
      return Promise.reject(response);
    } else {
      return response;
    }
  },
  error => {
    // console.log('err' + error); // for debug1
    // console.log(error.message);
    const { code, message } = error;
    if (code === 'ECONNABORTED' || message === 'Network Error') {
      Toast.clear();
      Dialog.alert({
        title: I18n.t('requestErrText.warn'),
        message: I18n.t('requestErrText.outTime'),
        confirmButtonText: I18n.t('requestErrText.retry')
      }).then(() => {
        // service.request(config);
        location.reload();
      });
    }
    // Dialog.alert({
    //   title: I18n.t('requestErrText.warn'),
    //   message: I18n.t('requestErrText.outTime')
    // }).then(() => {
    //   store.dispatch('FedLogOut');
    //   window.location = '#/login/';
    // });
    return Promise.reject(error);
  }
);
 
export default service;

重点来了。

在.env.development和 .env.production文件加个变量

在.env.development中写开发的地址

VUE_APP_BASE_API_D = 'http://192.168.5.76:8090/'

在.env.production 中写线上的地址

VUE_APP_BASE_API_D = 'http:/268.123.43.22:8090/'

记住变量要一样。

然后再写一个一定是再写一个axios的封装函数。

至少两个服务器的请求头也不会一样，处理方式也不一样，错误处理也有可能不一样。要是一样也不用两三个服务器取干了。

再封装的函数改重点改这里

const service = axios.create({
  baseURL: process.env.VUE_APP_API_D, // api 的 
  timeout: 300000 // request timeout
});

结束！