Vue 开发环境显示log信息

最新推荐文章于 2024-02-23 16:47:19 发布

转载最新推荐文章于 2024-02-23 16:47:19 发布 · 6.4k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b9b4c93f265da0af77508f8

文章标签：

#javascript #前端 #前端框架 #ViewUI

本文介绍了一种在不同运行环境中控制console.log显示的方法，通过检查URL参数和NODE_ENV变量，实现开发环境显示日志，生产环境关闭日志的功能。

有些时候想要开发环境显示console.log信息，但是生成环境不去显示这些信息，如何关闭？

原理：关闭log

console.log = function () {
  return false;
}
复制代码

const getQueryStr = (name) => {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
};
/* 若链接后面带上参数 envFlag=monitor
 * 则将 debug 置为true，否则置为false
*/
const monitor = 'monitor';
const envFlag = getQueryStr('envFlag');
let debug = monitor ? true : false;
if (envFlag === 'monitor' || process.env.NODE_ENV === 'development') {
  console.log("%cNow You Can Console Log...", "color:red;font-size:18px;font-style:oblique;");
  debug = monitor;
} else {
  debug = '';
  console.log = function () {
    return false;
  }
}

// 组件的显示或隐藏
const state = {debug: debug};
export const store = new vuex.Store({state, mutations});
复制代码