Vue.js如何在VS Code的终端中显示API请求及响应记录

实现逻辑 #

前端代码默认运行在浏览器环境，无法直接写入本地终端，可通过开发服务（Vite/Vue CLI）的中间件拦截API请求，在服务端直接输出日志到终端，无需修改业务代码。

具体实现方案 #

方案1：Vite 项目（无需修改业务代码） #

适配所有走本地代理的API请求，直接修改vite.config.js/ts即可：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    // 自定义API日志打印插件
    {
      name: 'api-log-to-terminal',
      configureServer(server) {
        server.middlewares.use((req, res, next) => {
          // 按你的API规则过滤请求，这里以接口前缀为/api为例
          if (req.url.startsWith('/api')) {
            res.on('finish', () => {
              // 按要求格式打印日志
              console.log(`${req.method} -> ${req.url} -> ${res.statusCode}`)
            })
          }
          next()
        })
      }
    }
  ],
  // 原有代理配置无需修改
  server: {
    proxy: {
      '/api': {
        target: '你的后端接口根地址',
        changeOrigin: true
      }
    }
  }
})

配置完成后重启Vite，所有走代理的API请求都会直接打印到Vite启动的终端中。

方案2：Vue CLI 项目（无需修改业务代码） #

修改vue.config.js配置即可：

module.exports = {
  devServer: {
    onBeforeSetupMiddleware(devServer) {
      devServer.app.use((req, res, next) => {
        // 按你的API规则过滤请求，这里以接口前缀为/api为例
        if (req.url.startsWith('/api')) {
          res.on('finish', () => {
            console.log(`${req.method} -> ${req.url} -> ${res.statusCode}`)
          })
        }
        next()
      })
    },
    // 原有代理配置无需修改
    proxy: {
      '/api': {
        target: '你的后端接口根地址',
        changeOrigin: true
      }
    }
  }
}

配置完成后重启项目即可生效。

方案3：请求不走本地代理的适配方案 #

如果API请求直接访问后端地址、不走本地开发服务代理，可以结合Axios拦截器上报日志到本地服务，再输出到终端：

1. 新增Axios响应拦截器逻辑：

// 你的Axios配置文件
const axiosInstance = axios.create({ baseURL: '你的后端接口根地址' })

// 响应成功拦截器
axiosInstance.interceptors.response.use(
  (res) => {
    // 仅开发环境上报日志
    if (import.meta.env.DEV) {
      fetch('/__api_log_report', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          method: res.config.method.toUpperCase(),
          url: res.config.url,
          status: res.status
        })
      })
    }
    return res
  },
  // 响应异常拦截器
  (err) => {
    if (import.meta.env.DEV && err.response) {
      fetch('/__api_log_report', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          method: err.config.method.toUpperCase(),
          url: err.config.url,
          status: err.response.status
        })
      })
    }
    return Promise.reject(err)
  }
)

2. 在Vite/Vue CLI配置中新增日志接收接口：

// Vite配置示例，Vue CLI适配逻辑同理
{
  name: 'api-log-receiver',
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      if (req.url === '/__api_log_report' && req.method === 'POST') {
        let logData = ''
        req.on('data', chunk => logData += chunk.toString())
        req.on('end', () => {
          const log = JSON.parse(logData)
          console.log(`${log.method} -> ${log.url} -> ${log.status}`)
          res.end('ok')
        })
      } else {
        next()
      }
    })
  }
}

内容的提问来源于stack exchange，提问作者Vadim T