Vue 3.x 中全局配置axios

在Vue 3.x中，如果你想在全球范围内配置axios（一个常用的JavaScript HTTP库），你可以通过Vue.config.globalProperties对象来进行设置。这是一个在每个组件实例创建之前初始化的全局属性，可以让你在整个应用中共享一些状态或配置。

以下是全局配置axios的基本步骤：

1. 首先，在项目的`main.js`或`vite.config.js`等入口文件中引入axios库：

import axios from 'axios';

2. 接下来，将axios的实例添加到Vue的原型上，使其成为所有组件默认可用的：

Vue.prototype.$http = axios.create({
  baseURL: process.env.BASE_API_URL, // 如果有环境变量，可以使用它
  timeout: 5000, // 设置超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

这里设置了基础URL、超时时间和默认请求头。你可以根据需要自定义其他选项，如认证信息、错误处理等。

相关问题

import axios from 'axios' Vue.config.productionTip = false Vue.use(axios, axios) Vue.prototype.$axios = axios

这段代码是在使用 Vue.js 框架时，将 axios 库引入，并将其挂载到 Vue 实例的原型上，方便在组件中进行调用。其中，Vue.use(axios, axios) 是在全局注册 axios，使其可以在任何组件中使用。同时，Vue.config.productionTip = false 是用来关闭生产模式下的提示信息。

vue中使用.env.development配置axios全局访问路由

可以在Vue项目根目录下的`.env.development`文件中添加如下配置：

VUE_APP_API_BASE_URL=http://localhost:3000/api

然后在项目中使用axios时，在`main.js`中添加如下代码：

import axios from 'axios'

axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL
Vue.prototype.$http = axios

这样就可以在项目中全局使用`this.$http`来进行访问了。注意，这里的`process.env.VUE_APP_API_BASE_URL`就是从`.env.development`文件中读取的值。在生产环境中，可以在`.env.production`文件中添加相同的配置，这样在生产环境中也可以使用相同的配置。