axios封装&多环境切换&vue代理中使用

// 环境的切换
1. axios 封装
if (process.env.NODE_ENV == 'development') {
  axios.defaults.baseURL = '/api2';
} else if (process.env.NODE_ENV == 'debug') {
  axios.defaults.baseURL = '/';
} else if (process.env.NODE_ENV == 'production') {
  axios.defaults.baseURL = 'https://api.apiopen.top/musicRankings';
}
export const service = axios.create({
  timeout: 15000
});

if (process.env.NODE_ENV == 'development') {
  service.defaults.baseURL = '/api3';
} else if (process.env.NODE_ENV == 'debug') {
  service.defaults.baseURL = '/';
} else if (process.env.NODE_ENV == 'production') {
  service.defaults.baseURL = 'https://api.apiopen.top';
}


2.api统一接口
import { service } from '@/request/http'
import axios from '@/request/http'

export const getDataA = () => {
    return axios({
      url: `/`,
      method: 'get'
    })
  }
export const getDataB = (page,count) => {
  return service({
    url: `/getSongPoetry?page=${page}&count=${count}`,
    method: 'get'
  })
}


3.组件中使用
import { getDataA, getDataB } from "@/api/api";
created() {
    this.getMusic();
    this.getData();
  },
  methods: {
    async getMusic() {
      const { data } = await getDataA();
      console.log(data);
    },
    getData() {
      getDataB(1, 20)
        .then((result) => {
          console.log(result);
        })
        .catch((err) => {
          console.log(err);
        });
    },

4.devServer代理设置
devServer: {
    before: require('./src/mock/index.js'),
    open: true,
    host: 'localhost',
    port: 8080,
    hotOnly: true,
    watchContentBase: true,
    proxy: {
      "/api2": {
        target: "https://api.apiopen.top/musicRankings",
        pathRewrite: {
          "^/api2": ""
        }
      },
      "/api3": {
        target: "https://api.apiopen.top",
        pathRewrite: {
          "^/api3": ""
        }
      },
    }
  }