Vue 3 中 axios 请求拦截器美化日志的核心是结构化输出关键字段：URL、method、手动设置的 headers（如 Authorization）、params/data（浅层 stringify 限长），配合 console.group 分组、颜色样式、时间戳+短 requestID 追踪，并通过环境变量或开关控制启停。
在 Vue 3 中，用 axios 请求拦截器打印美化日志，核心是把原始 config 对象结构化、可读化输出，而不是直接 console.log(config) —— 那样堆满冗余字段，反而干扰调试。
只打关键字段，避免信息过载
请求配置里真正影响调试的就几个：URL、method、headers（尤其 Authorization）、params 或 data。其他如 transformRequest、adapter 等内部字段基本不用看。
- 提取
config.url和config.method.toUpperCase() - 过滤掉默认 header（如
Accept、User-Agent），只显示手动设置的，比如Authorization、X-Trace-ID - 对
config.params或config.data做浅层 JSON.stringify，并限制长度（防大对象卡顿）
用 console.group 分组 + 颜色标识类型
利用浏览器控制台的分组和样式能力，让日志更清晰：
- 用
console.group(`%c→ ${method} ${url}`, 'color: #2196F3; font-weight: bold')开启分组 - 用
console.log('%cHeaders:', 'color: #666; font-weight: bold', headers)区分模块 - 结尾加
console.groupEnd()收起 - 错误时用
%c❌ 请求失败配红色样式，一眼识别异常
加时间戳和轻量 ID，方便追踪调用链
多个请求并发时，光看 URL 容易混淆。可在每条日志开头加毫秒级时间戳和简易 requestID：
立即学习“前端免费学习笔记（深入）”；
- 生成短 ID：
const reqId = Math.random().toString(36).slice(2, 6) - 日志前缀写成：
[${new Date().toISOString().slice(11, -1)} | ${reqId}] - 这个 ID 可后续透传到响应拦截器，实现「请求-响应」日志配对
封装成可开关的调试工具
生产环境肯定不能留日志。建议用环境变量控制：
- 在拦截器里判断：
if (import.meta.env.DEV) - 或加个全局开关：
window.__API_LOG__ = true，方便临时开启 - 再进一步，可支持等级：
logLevel: 'basic' | 'detail' | 'none'，按需输出
