Vue.js项目安装axios后如何在main.js中正确引入配置？

云上老周

2026-8-28

问题解答

你的axios全局配置整体思路没问题，但存在1个会直接导致请求失败的错误，还有几处可以优化的冗余写法，具体说明如下：

致命配置错误：baseURL和你实际启动的json-server服务地址不匹配。你本地启动的Mock服务跑在3000端口，代码里写的8000端口会让所有请求直接404；另外别把/users写死在baseURL里，之后要是加其他业务接口（比如角色、权限接口）根本没法扩展，baseURL只配服务根地址就行。
冗余写法优化：你用Vue.use包一层匿名插件来挂载axios实例的写法语法上能运行，但属于没必要的套壳，不用特意写install方法，直接把创建好的axios实例挂到Vue原型上就够，代码更简洁好维护。
额外确认：你引入bootstrap、bootstrap-vue的顺序和注册逻辑都是对的，这部分不用改。

修正后的main.js完整代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import axios from 'axios'

// 引入样式文件（顺序正确，无需调整）
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

// 全局注册BootstrapVue组件
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

Vue.config.productionTip = false

// 直接挂载axios实例到Vue原型
Vue.prototype.$api = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000 // 按需配置请求超时时间，单位毫秒
})

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

组件内CRUD调用示例

配完之后，任意Vue组件里都能直接通过this.$api调接口，不用重复引入axios：

// 查询用户列表
this.$api.get('/users').then(res => {
  this.userList = res.data
})

// 新增用户
this.$api.post('/users', { username: 'test', email: 'test@example.com' })

// 编辑指定id用户
this.$api.put(`/users/${userId}`, { username: 'test2', email: 'test2@example.com' })

// 删除指定id用户
this.$api.delete(`/users/${userId}`)