Nuxt 3 SSR开发环境下Server API无控制台日志输出问题

问题详情 #

在Nuxt 3 SSR的Server API中添加console.log语句，执行pnpm run dev启动开发环境时，终端不会输出该日志；但执行pnpm run build构建项目后运行index.mjs，日志能正常显示。

相关代码：

export default defineEventHandler(async (event) => {
  console.log('HAHAHAHAHA');

  return 'LOGIN!';
});

环境信息：

------------------------------
- Operating System: `Linux`
- Node Version:     `v18.12.1`
- Nuxt Version:     `3.0.0`
- Nitro Version:    `1.0.0`
- Package Manager:  `pnpm@7.22.0`
- Builder:          `vite`
- User Config:      `app`, `runtimeConfig`, `modules`, `ssr`, `vite`, `typescript`, `css`, `build`
- Runtime Modules:  `@app/ui@1.0.0-alpha`, `nuxt-icon@0.1.8`, `@pinia/nuxt@0.4.6`
- Build Modules:    `-`
------------------------------

原因分析 #

Nuxt 3开发环境下，后端引擎Nitro默认会对日志做适配处理，加上Vite作为构建工具时，开发服务器的日志输出通道与后端服务的日志通道存在隔离，导致原生console.log的输出被拦截或未转发到终端。

解决方案 #

1. 使用Nitro官方日志工具替代console.log #

Nitro提供的useLogger会自动适配开发、生产环境的日志输出规则，确保日志正常显示：

export default defineEventHandler(async (event) => {
  const logger = useLogger();
  logger.info('HAHAHAHAHA'); // 支持info/warn/error等不同级别日志

  return 'LOGIN!';
});

2. 调整Nitro日志级别配置 #

在nuxt.config.ts中显式设置Nitro的日志级别，强制输出所有日志：

export default defineNuxtConfig({
  nitro: {
    logLevel: 'info' // 可选值: trace/debug/info/warn/error/fatal
  }
});

3. 检查Vite开发服务器配置 #

确保Vite没有屏蔽后端服务的日志输出，可添加如下配置到nuxt.config.ts：

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        overlay: false
      }
    }
  }
});

验证方法 #

修改完成后执行pnpm run dev，访问对应的Server API接口（例如/api/[你的接口名]），查看终端是否正常输出日志。

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