vue2 axios统一路径

Vue2 中，可以使用 Axios 进行HTTP请求，为了在项目中统一处理不同环境（如开发、生产）下的API路径，通常会采用配置文件的方式。例如，创建一个 `axios.js` 或 `api.js` 文件，将基础URL配置为环境变量：

// api.js 或 axios.js
const axios = require('axios');
const { env } = process.env;

// 如果你在Node环境中，可能会从环境变量读取
const baseURL = env.NODE_ENV === 'development' ? 'http://localhost:8080' : 'https://your-api-url.com';

axios.defaults.baseURL = baseURL;
axios.defaults.headers.common['Content-Type'] = 'application/json';
axios.interceptors.request.use(
  // 添加全局请求拦截器
  (config) => {
    // 在这里添加任何需要预处理请求的操作
    return config;
  },
  (error) => Promise.reject(error)
);

module.exports = axios;

然后在 Vue 组件中导入并使用这个封装好的 Axios 实例：

import axios from './axios';

export default {
  methods: {
    fetchData() {
      axios.get('/api/data') // 调用 API 时不需要关心实际的域名或端口
        .then(response => {
          // 处理响应...
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
};