用 JS 里的七行代码，干掉浏览器控制台 Vue.js 警告信息

2023-11-20 03:26:13

在使用 Vue.js 的项目中，开发者经常需要使用浏览器控制台来调试代码并跟踪应用程序的状态。然而，Vue.js 在开发环境下会输出许多告警信息，这些信息可能会干扰应用程序的调试。本文将介绍如何使用 JavaScript 代码关闭 Vue.js 的告警信息。

过滤告警日志前

在过滤 Vue.js 的告警信息之前，我们需要先了解这些告警信息是如何产生的。Vue.js 在开发环境下会自动开启一个名为 Vue.config.warnHandler 的函数，这个函数会在控制台中输出告警信息。我们可以在 Vue.js 的文档中找到关于这个函数的更多信息。

过滤告警日志后

为了过滤掉 Vue.js 的告警信息，我们可以使用 JavaScript 代码来覆盖 Vue.config.warnHandler 函数。我们可以通过以下代码来实现：

Vue.config.warnHandler = function (msg, vm, trace) {
  // 如果告警信息中包含 "Deprecation"，则不输出
  if (msg.indexOf("Deprecation") !== -1) {
    return;
  }
  // 如果告警信息中包含 "Not found"，则不输出
  if (msg.indexOf("Not found") !== -1) {
    return;
  }
  // 输出其他告警信息
  console.warn(msg, vm, trace);
};

这段代码覆盖了 Vue.config.warnHandler 函数，并根据告警信息中的内容决定是否输出。如果告警信息中包含 "Deprecation" 或 "Not found"，则不会输出。否则，会输出其他告警信息。

如何处理？

添加上面的代码后，Vue.js 的告警信息就会被过滤掉了。但是，如果我们想要在某些情况下仍然看到告警信息，可以使用下面的代码：

Vue.config.warnHandler = function (msg, vm, trace) {
  // 如果告警信息中包含 "Deprecation"，则输出
  if (msg.indexOf("Deprecation") !== -1) {
    console.warn(msg, vm, trace);
  }
  // 如果告警信息中包含 "Not found"，则输出
  if (msg.indexOf("Not found") !== -1) {
    console.warn(msg, vm, trace);
  }
  // 输出其他告警信息
  console.warn(msg, vm, trace);
};