在 Vue 2 和 Vue 3 项目中使用 Axios 设置 Base URL 的方法详解

在前端开发中，使用 Axios 进行 HTTP 请求是常见的选择。为简化 API 请求，设置 Axios 的全局 baseURL 可以避免在每次请求时重复书写公共部分的 URL。本文将介绍在 Vue 2 和 Vue 3 项目中配置 Axios 的所有方法，包括全局配置、实例配置和运行时配置等。

安装 Axios

在开始之前，首先需要安装 Axios：

npm install axios

或者：

yarn add axios

在 Vue 2 项目中配置 Axios

方法一：在 Axios 实例中配置 baseURL

在 Vue 2 项目中，通常会在 src 目录下创建一个新的文件（例如 http.js），用来创建和配置 Axios 实例：

// src/http.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com' // 设置baseURL
});

export default instance;

方法二：全局配置 Axios

可以在 main.js 中直接配置 Axios 的全局 baseURL：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com'; // 设置全局baseURL

Vue.prototype.$axios = axios; // 将axios实例挂载到Vue原型上

new Vue({
  render: h => h(App),
}).$mount('#app');

方法三：在请求时配置 baseURL

你也可以在每个请求的配置中单独设置 baseURL：

this.$axios.get('/path/to/api', {
  baseURL: 'https://api.example.com'
})
.then(response => {
  this.message = response.data;
})
.catch(error => {
  console.error(error);
});

在 Vue 3 项目中配置 Axios

方法一：在 Axios 实例中配置 baseURL

在 Vue 3 项目中，同样可以在 src 目录下创建一个新的文件（例如 http.js），用来创建和配置 Axios 实例：

// src/http.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com' // 设置baseURL
});

export default instance;

方法二：全局配置 Axios

在 Vue 3 中，可以在 main.js 中配置 Axios 的全局 baseURL：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com'; // 设置全局baseURL

const app = createApp(App);

app.config.globalProperties.$axios = axios; // 将axios实例挂载到全局属性上

app.mount('#app');

方法三：在请求时配置 baseURL

在每个请求的配置中单独设置 baseURL：

this.$axios.get('/path/to/api', {
  baseURL: 'https://api.example.com'
})
.then(response => {
  this.message = response.data;
})
.catch(error => {
  console.error(error);
});

组件中使用 Axios

在 Vue 2 中使用 Axios

现在，你可以在任何 Vue 2 组件中使用这个配置好的 Axios 实例了：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    this.$axios.get('/path/to/api')
      .then(response => {
        this.message = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
};
</script>

在 Vue 3 中使用 Axios

在 Vue 3 组件中使用配置好的 Axios 实例：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    this.$axios.get('/path/to/api')
      .then(response => {
        this.message = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
};
</script>

总结

通过为 Axios 设置 baseURL，可以简化 API 请求，避免在每次请求时重复书写公共部分的 URL。无论是在 Vue 2 还是 Vue 3 项目中，设置 Axios 的 baseURL 都非常简单，可以通过全局配置、实例配置和运行时配置等多种方式实现。希望本文能够帮助你在 Vue 项目中更好地配置和使用 Axios。