registService.js

// 引入axios库
import axios from "axios";
import apiList from "./apiList";

// 设置请求的base url
const BASE_URL = "http://127.0.0.1:3001/api";

// 设置请求头
const headers = {};

// 定义API接口
// const apis = {
//   getData: {
//     url: "/seller",
//     method: "get",
//   },
// };
// ---------------------------------------分界线--------------------------------------------------------
switch (process.env.NODE_ENV) {
  //可以在根目录的 package.json 配置 NODE_ENV
  case "production":
    axios.defaults.baseURL = "生产环境地址";
    break;
  case "test":
    axios.defaults.baseURL = "测试环境地址";
  default:
    axios.defaults.baseURL = "开发环境地址";
}

/*
  设置请求传输数据的格式
  只支持POST请求，根据实际要求决定设置不设置
  */
axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
// ---------------------------------------分界线--------------------------------------------------------

// 创建axios实例
const axiosInstance = axios.create({
  baseURL: BASE_URL,
  headers: headers,
});
/*
 * 设置请求超时时间和跨域是否允许携带凭证
 */
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;

// 定义请求拦截器
axiosInstance.interceptors.request.use(
  (config) => {
    // 请求发送前对请求配置进行处理，例如加入token等操作
    // 在这里可以做一些全局的请求拦截处理
    //获取本地存储中的token
    // let token = localStorage.getItem("token");
    // token && (config.headers.Authorization = token);
    return config;
  },
  (error) => {
    // 对请求错误进行处理
    return Promise.reject(error);
  }
);

// 定义响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    // 对响应数据进行处理，例如统一处理错误码等操作
    // 在这里可以做一些全局的响应拦截处理
    return response;
  },
  (error) => {
    // 对响应错误进行处理
    return Promise.reject(error);
  }
);

// 定义API方法
const registService = (apis, axiosInstance) => {
  const service = {};
  for (let apiName in apis) {
    const { url, method } = apis[apiName];
    service[apiName] = async (params) => {
      try {
        const response = await axiosInstance({
          url,
          method,
          data: params,
        });
        return response.data;
      } catch (error) {
        console.error(error);
        throw error;
      }
    };
  }
  return service;
};

// 导出API实例
export default registService(apiList, axiosInstance);

判断当前环境时，需要配置环境，npm run serve默认时dev开发环境，npm run build为生产环境

package.json

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "serve:test": "set NODE_ENV=test&&vue-cli-service serve",
    "serve:production": "set NODE_ENV=production&&vue-cli-service serve"
  },

apiList.js

const apiList = {
  getData: {
    url: "/seller",
    method: "get",
  },
  getTrendData: {
    url: "/trend",
    method: "get",
  },
  getMapData: {
    url: "/map",
    method: "get",
  },
  getRankData: {
    url: "/rank",
    method: "get",
  },
  getHotData: {
    url: "/hotproduct",
    method: "get",
  },
  getStockData: {
    url: "/stock",
    method: "get",
  },
};

export default apiList;

xx.vue使用

<script>
import api from "../api/registService.js";
export default {
     methods:{
           async getData() {
               // const params = {
                 // 这里放需要的参数
                 // };
              // 调用api.js中的getData方法获取数据
                  const ret = await api.getData(params);
        }
    },
} 

}
</script>