推荐在Vue项目中封装Axios实例：安装后于src/utils/request.js创建实例，统一配置baseURL、timeout和headers，并通过环境变量动态切换API地址；再在main.js中全局挂载供组件调用。
直接在项目里装好 Axios，再统一设好基础 URL，后续所有请求就不用重复写完整地址了。
安装 Axios
打开终端，进入你的 Vue 项目根目录，执行：
- npm install axios
- 或 yarn add axios（如果你用 Yarn）
创建独立的 Axios 实例（推荐）
不建议直接改全局 defaults，而是新建一个封装好的实例，更可控、易维护。在 src/utils/request.js（或 src/api/http.js）中写：
import axios from 'axios'
const request = axios.create({
baseURL: import.meta.env.VUE_APP_BASE_API || 'https://api.example.com',
timeout: 10000,
headers: {
'Content-Type': 'application/json'
}
})
export default request
这样就把基础路径、超时、默认头都集中管理了。环境变量 VUE_APP_BASE_API 可在 .env.development 等文件里定义，开发/测试/生产自动切换。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
全局挂载（Vue 3 写法）
在 main.js 中引入并挂载，让所有组件都能用 this.$http 或 app.config.globalProperties.$http：
import { createApp } from 'vue'
import App from './App.vue'
import request from './utils/request'
const app = createApp(App)
app.config.globalProperties.$http = request
// Vue 3 组合式 API 中推荐用 provide/inject 或直接 import，但挂载后 Options API 组件仍可 this.$http.get(...)
Vue 2 的挂载方式
在 main.js 里：
import Vue from 'vue' import request from './utils/request' Vue.prototype.$http = request
之后任意组件中就能直接写：this.$http.get('/users') → 实际请求地址是 https://api.example.com/users
