效果展示

实现步骤

1. 新建js文件 定义一个类 用于提供控制台打印日志显示样式的方法

src\libs\util.log.js

class Logger {
  // 定义静态方法
  static typeColor(type = "default") {
    let color = "";
    switch (type) {
      case "default":
        color = "#35495E";
        break;
      case "primary":
        color = "#3488ff";
        break;
      case "success":
        color = "#43B883";
        break;
      case "warning":
        color = "#e6a23c";
        break;
      case "danger":
        color = "#f56c6c";
        break;
      default:
        break;
    }
    return color;
  }

  static capsule(title, info, type = "primary") {
    console.log(
      `%c ${title} %c ${info} %c`,
      "background:#35495E; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;",
      `background:${this.typeColor(
        type
      )}; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff;`,
      "background:transparent"
    );
  }

  static colorful(textArr) {
    console.log(
      `%c${textArr.map((t) => t.text || "").join("%c")}`,
      ...textArr.map((t) => `color: ${this.typeColor(t.type)};`)
    );
  }

  static default(text) {
    this.colorful([{ text }]);
  }

  static primary(text) {
    this.colorful([{ text, type: "primary" }]);
  }

  static success(text) {
    this.colorful([{ text, type: "success" }]);
  }

  static warning(text) {
    this.colorful([{ text, type: "warning" }]);
  }

  static danger(text) {
    this.colorful([{ text, type: "danger" }]);
  }

  static admin(text) {
    let info = `这是我的证明标记`;
    this.colorful([{ text: info, type: "primary" }]);
  }
}

export default Logger;

2. main.js中 引入并使用

import Logger from "./libs/util.log";

Logger.capsule(import.meta.env.VITE_APP_WEB_TITLE, import.meta.env.VITE_APP_WEB_VERSION);
Logger.capsule('当前环境', import.meta.env.MODE);
Logger.admin()