如何在Vue.js前端项目中使用pino-pretty？导入遇process重复声明错误

错误原因 #

pino-pretty原本为Node.js环境设计，依赖原生process对象。在Vue.js前端项目中，若构建工具（如Vite、Webpack）或其他依赖已在全局/模块中声明process变量，就会触发Identifier 'process' has already been declared语法错误。

可行解决方案 #

1. 避免前端直接导入pino-pretty #

pino-pretty更适合Node.js后端场景，前端建议仅使用pino核心库，搭配自定义前端格式化逻辑：

import pino from 'pino'

const logger = pino({
  browser: {
    write: (logObj) => {
      const { level, msg, time } = JSON.parse(logObj)
      console.log(`[${new Date(time).toLocaleString()}] [${level}] ${msg}`)
    }
  }
})

2. 排查并修复process重复声明 #

检查项目配置文件（如vite.config.js、vue.config.js）或自定义脚本，是否存在手动声明process的代码：

// 错误写法：重复声明process
const process = require('process')

改为导入方式，或直接使用构建工具注入的全局process：

// 正确写法
import process from 'process'

3. 调整pino-transport配置（适配前端构建） #

若必须使用pino-pretty，可在transport配置中忽略Node.js特有字段，同时确保构建工具不重复注入process：

import pino from 'pino'

const logger = pino({
  transport: {
    target: 'pino-pretty',
    options: {
      ignore: 'pid,hostname',
      colorize: false // 前端环境通常不支持终端颜色
    }
  },
  browser: {
    transmit: {
      level: 'info',
      send: (level, logEvent) => console.log(logEvent)
    }
  }
})

4. 对齐依赖版本 #

检查pino与pino-pretty的版本兼容性，尝试升级到最新稳定版，或降级到已知适配前端环境的版本（例如pino@8.x + pino-pretty@10.x组合）。

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