Vue 3 集成log4js时process未定义错误的解决咨询

问题根源 #

你使用的file类型appender是Node.js环境专用的，它依赖Node.js的fs文件系统模块和process全局变量，但浏览器环境不存在这些API，因此启动时触发报错。

解决方案 #

根据你的项目场景选择对应方案：

1. 纯浏览器端Vue项目（最常用场景）

改用log4js提供的浏览器兼容appender，比如browserConsole（输出到浏览器控制台）：

import log4js from "log4js";

// 适配浏览器的log4js配置
log4js.configure({
  appenders: {
    browserConsole: {
      type: "browserConsole",
      layout: {
        type: "pattern",
        pattern: "%d %p [%X{user}] %m%n",
      },
    },
  },
  categories: {
    default: {
      appenders: ["browserConsole"],
      level: "debug",
    },
  },
});

export const logger = log4js.getLogger();

如果需要持久化日志，可通过前端发请求将日志上报到后端，由后端用log4js写入文件，前端只负责收集和发送日志。

2. Vue SSR（服务端渲染）项目

区分客户端和服务端配置，服务端用file appender，客户端用浏览器兼容的配置：

import log4js from "log4js";

// 判断当前运行环境
if (typeof window === "undefined") {
  // 服务端配置：使用file appender写入日志文件
  log4js.configure({
    appenders: { 
      app: { 
        type: "file", 
        filename: "./logs/app.log",
        compress: true,
        layout: {
          type: "pattern",
          pattern: "%d %p [%X{user}] %m%n",
        },
        daysToKeep: 14,
      } 
    },
    categories: { 
      default: { 
        appenders: ["app"], 
        level: "debug"
      } 
    },
  });
} else {
  // 客户端配置：输出到浏览器控制台
  log4js.configure({
    appenders: {
      browserConsole: {
        type: "browserConsole",
        layout: {
          type: "pattern",
          pattern: "%d %p [%X{user}] %m%n",
        },
      },
    },
    categories: {
      default: {
        appenders: ["browserConsole"],
        level: "debug",
      },
    },
  });
}

export const logger = log4js.getLogger();

3. 临时绕过process未定义报错（不推荐）

如果只是想临时消除报错（但file appender依然无法在浏览器工作），可在Vite配置中注入空的process.env：

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

export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': {}
  }
})

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