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

安装 Axios

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

npm install axios
  • 1.

或者：

yarn add axios
  • 1.

在 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;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
方法二：全局配置 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');
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
方法三：在请求时配置 baseURL

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

this.$axios.get('/path/to/api', {
  baseURL: 'https://api.example.com'
})
.then(response => {
  this.message = response.data;
})
.catch(error => {
  console.error(error);
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

在 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;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
方法二：全局配置 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');
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
方法三：在请求时配置 baseURL

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

this.$axios.get('/path/to/api', {
  baseURL: 'https://api.example.com'
})
.then(response => {
  this.message = response.data;
})
.catch(error => {
  console.error(error);
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

组件中使用 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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
在 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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.

总结

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