前端 vue3+router 比较好用的自定义日志插件

前言：因为作者的项目中，是使用wujie 微前端框架，页面多，子应用也多，每次用console.log的时候，根本分不清是哪里打出来的日志，你想要删除这个console都要找半天，只能在打印当时分的清，看上去很乱，又不太好管理。所以就自己写了一个vue3的插件用来区分。

目前我自己是放到 util文件夹下面，各位客官随意

实际效果为

当前插件支持的功能如下


变量	功能解释	类型
show	是否展示，有需求的可以控制只在开发环境打印	Boolean
bgcolor	控制console打印的背景色，传值是颜色就行	String
color	打印的文字颜色	String
startText	打印开始的标题，可以区分是哪个应用	String
endText	打印结束的文字	String

使用示例： 在main.js 中引入即可最好是在 app.use(router); 之后，因为要拿路由来显示是哪个页面展示的

javascript 复制代码

import consoleUtil from '@/utils/consoleUtil';
app.use(consoleUtil, {
  show: import.meta.env.MODE === 'development',
  bgcolor: '#dee2e6',
  color: '#4971FE',
  startText: 'hellow应用',
  endText: ' 打印日志',
});

代码放下面可以自己调

文件名： consoleUtil.js

javascript 复制代码

export default {
  install: (app, options) => {
    const isBoolean = (v) => typeof v === 'boolean';
    const isNonEmptyString = (v) => typeof v === 'string' && v.trim() !== '';
    let myOptions = {
      show: false,
      bgcolor: '#dee2e6',
      color: '#4971FE',
      startText: '',
      endText: '打印日志',
      ...(options && typeof options === 'object'
        ? {
            ...(isBoolean(options.show) ? { show: options.show } : {}),
            ...(isNonEmptyString(options.bgcolor)
              ? { bgcolor: options.bgcolor }
              : {}),
            ...(isNonEmptyString(options.color)
              ? { color: options.color }
              : {}),
            ...(isNonEmptyString(options.startText)
              ? { startText: options.startText }
              : {}),
            ...(isNonEmptyString(options.endText)
              ? { endText: options.endText }
              : {}),
          }
        : {}),
    };

    if (myOptions.show) {
      const zlog = (...args) => {
        // 获取当前路由信息
        let routeInfo = {};
        try {
          const router = app.config.globalProperties.$router;
          if (router && router.currentRoute) {
            const currentRoute =
              router.currentRoute.value || router.currentRoute;
            routeInfo = currentRoute;
          }
        } catch (error) {
          // 如果获取失败，使用浏览器路径
          routeInfo = window.location.pathname;
        }

        console.log(
          `%c ----- ${myOptions.startText} 【${
            routeInfo?.meta?.locale || '-'
          } | ${routeInfo?.path || routeInfo}】${myOptions.endText} ----`,
          `padding: 2px; border-radius: 3px; color: ${myOptions.color}; background: ${myOptions.bgcolor}; font-weight: bold;`,
          ...args
        );
      };

      // 为 Options API 提供全局属性
      app.config.globalProperties.$zlog = zlog;

      // 为 Composition API 提供全局函数
      app.provide('zlog', zlog);

      // 挂载到全局对象，让所有地方都能访问
      if (typeof window !== 'undefined') {
        window.$zlog = zlog;
      }
      if (typeof global !== 'undefined') {
        global.$zlog = zlog;
      }
    } else {
      // 不启用时供空函数,不然之前使用过的地方会报错
      const emptyZlog = () => {};
      app.config.globalProperties.$zlog = emptyZlog;
      app.provide('zlog', emptyZlog);
      if (typeof window !== 'undefined') {
        window.$zlog = emptyZlog;
      }
      if (typeof global !== 'undefined') {
        global.$zlog = emptyZlog;
      }
    }
  },
};