企业官网建设流程全解析

写Vue项目，只要用到接口，十有八九绕不开axios。尤其当你同时维护着Vue2老项目和Vue3新项目，或者团队里有人还在用Vue2、有人已经开始写Vue3组合式API，你会发现“axios怎么用”这个问题，答案已经不是背下来一个套路就够用的了。这篇文章我想把vue2和vue3中使用axios这件事彻底聊透：从安装配置、基础请求、拦截器、二次封装，到实际项目里最容易踩的那些坑，一次性整理清楚。不管是刚入门Vue的小白，还是正从Vue2迁移到Vue3的从业者，都应该能从里面找到能直接抄走的东西。

先说一个很多教程不会一开始就告诉你的结论：axios本身并不区分Vue2还是Vue3，它就是一个独立的、基于Promise的HTTP客户端库。真正有区别的，是你在Vue2和Vue3里“怎么用它”——挂载方式、响应式上下文、生命周期都变了，使用习惯自然要跟着变。下面我按实际项目里的使用顺序，把两种环境下最合适的用法拆开讲。

1. 为什么Vue2和Vue3里axios的用法会不一样

1.1 Vue2时代：挂原型、用this的约定俗成

Vue2项目里最常见的操作，是在入口文件main.js里这么写：

import Vue from 'vue' import axios from 'axios' Vue.prototype.$http = axios

然后组件里直接这样调：

this.$http.get('/api/user').then(res => { this.userList = res.data })

挂到Vue.prototype上，目的是让每个组件实例里都能用this.$http拿到同一个axios实例。这个做法在Vue2时代非常流行，给axios“起一个别名”挂到原型上，所有组件都能直接访问，不需要在每个文件里重复import。

但这种用法有两个隐含问题。

第一，它会污染全局命名空间。Vue.prototype上挂的东西，所有组件都能看到，一旦团队里有人不小心覆盖了this.$http，或者和别的插件重名，排查起来很头痛。

第二，它和JavaScript模块化的推荐做法背道而驰。现代工程里，显式import比隐式全局访问更利于类型提示、测试和代码分析。你写this.$http，IDE不知道这是个什么对象，想要跳转定义也做不到。

1.2 Vue3时代：组合式API带来的新习惯

到了Vue3，官方不再推荐在组件里到处用this做隐式访问，组合式API（Composition API）让数据流更透明。现在的常规做法是在需要的文件里显式import：

import axios from 'axios' const getUserList = async () => { const res = await axios.get('/api/user') return res.data }

你可能会问：“那我是不是可以完全照搬Vue2那套，继续挂到globalProperties上？”

确实可以，Vue3还提供了一个globalProperties来做类似的全局挂载：

app.config.globalProperties.$http = axios

组件里用this.$http依旧能访问到（Options API下this仍然存在）。但如果你已经切换到组合式API，比如用setup函数、用