Vue项目中如何为ololog创建全局日志实例 无需重复import

核心问题结论 #

完全不需要在每一个用到日志功能的组件里单独 import 原始包，只需要一次配置就可以实现全项目全局调用；日志实例也支持按照项目需求自定义配置，所有规则统一复用。

自定义日志实例的创建方式 #

ololog 支持通过链式配置生成独立的定制化实例，所有通用日志规则只需要在创建实例时配置一次，不需要每次调用日志时重复设置。常见的配置逻辑包括：生产环境自动屏蔽调试日志、统一日志前缀、开启控制台彩色定位、调整日志输出格式等。
示例创建代码：

import baseLog from 'ololog'

// 生成项目专用的单例日志器
const appLogger = baseLog.configure({
  // 生产环境下关闭debug级别日志输出
  print: process.env.NODE_ENV === 'production' 
    ? baseLog.branch({ debug: () => {} }) 
    : baseLog.print,
  // 给所有日志加统一项目标识前缀
  tag: '[项目运行日志]',
  // 开启日志位置定位，方便排查问题
  locate: true
})

// 单独导出这个配置好的实例，供全局调用
export default appLogger

全局挂载实现全项目可用 #

根据你使用的Vue版本，在项目入口文件（通常为 src/main.js 或 src/main.ts）完成挂载即可：

Vue2 场景 #

直接将实例挂载到 Vue 原型上，所有组件上下文都可直接访问：

import Vue from 'vue'
import App from './App.vue'
// 引入前面配置好的单例日志器
import appLogger from './utils/logger'

// 挂载到原型，组件内直接通过this调用
Vue.prototype.$log = appLogger

new Vue({
  render: h => h(App),
}).$mount('#app')

组件内使用时无需任何import，直接调用即可：

export default {
  created() {
    // 直接调用全局日志方法
    this.$log('组件挂载完成')
    this.$log.error('接口请求异常')
  }
}

Vue3 场景 #

通过 globalProperties 做全局挂载，同时可配合 provide/inject 适配组合式API的使用习惯：

import { createApp } from 'vue'
import App from './App.vue'
import appLogger from './utils/logger'

const app = createApp(App)

// 全局挂载，选项式API下可通过this访问
app.config.globalProperties.$log = appLogger
// 注入日志器，组合式API下可直接inject获取
app.provide('appLogger', appLogger)

app.mount('#app')

组件内使用示例：

• 选项式API：和Vue2一致，直接用 this.$log 调用
• 组合式API：

import { inject } from 'vue'
export default {
  setup() {
    // 无需引入日志包本身，直接从注入的依赖中获取
    const log = inject('appLogger')
    log('组合式API初始化完成')
  }
}

实用优化建议 #

• 所有通用日志配置统一收敛到单独的utils/logger.js文件中统一管理，不要在入口文件直接堆叠配置，后续调整日志规则时不需要反复翻找入口文件
• 非组件场景下，比如工具函数、请求拦截器、路由守卫里需要打日志时，直接引入导出的单例日志器即可，不需要重复引入原始ololog包，保证全项目日志规则统一
• 不要在单个组件内重新调用ololog的配置方法生成新实例，否则会丢失全局配置的统一规则，造成不同位置输出的日志格式不一致，增加排查问题的成本

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