Vue3 vite 项目使用 loglevel库作为前端（浏览器）日志库

一、参考

1. vue 日志框架 log4javascript
2. loglevel npm 官网

二、 问题描述

工作中，同事在分享项目的时候，说总部大佬（是从Android 转过来的）写的代码有非常多的日志，代码写的很规范，但是带来的问题日志过多，反而突出不了重点，给调试带来了麻烦——要到处去找相关的日志。

解决办法

1. 早期使用过 log4javascript 库
2. 在网上搜索到了 loglevel 库

为什么不使用控制台原生的 console.log日志？
虽然浏览器的控制台功能很强大，后台开发的人都知道日志的重要性，日志库一般都会有日志级别，比如 log4j，在开发的时候将日志级别调得比较低，可以看到大部分日志，发布的时候，调高日志级别，可以查看关键重要的日志。

三、开发实现

import { createApp } from 'vue'

/* *********** 引入 日志 loglevel ************ */
import log from 'loglevel';

// window.console.log = log.trace
window.console.log = log.info
window.console.debug = log.debug
window.console.info = log.info
window.console.warn = log.warn
window.console.error = log.error

const msg = "我是测试内容"

//import.meta.env.MODE development
console.log('import.meta.env.MODE', import.meta.env.MODE)
// 设置日志级别
if (import.meta.env.MODE === 'development') {
  log.setLevel('debug')
} else {
  log.setLevel('error')
}

/* log.trace(msg)
log.debug(msg)
log.info(msg)
log.warn(msg)
log.error(msg) */
console.log(msg)
console.debug(msg)
console.info(msg)
console.warn(msg)
console.error(msg)

app.mount('#app')

日志级别是 debug

日志级别是 error

规范说明

1. 既然有了日志级别，就需要团队统一日志规范，方便团队协同开发调试
2. 将日志级别的 设置权限交给后台，这样方便动态控制日志级别，方便现场调试