动态控制项目中console输出的方案
493次阅读
38人点赞
发布时间: 2025-03-18 14:40:59
扫码到手机查看
![]()
自定义console包装器
之前介绍过，在vue-cli打包的时候直接屏蔽，这是从编译环境上就屏蔽的做法，链接：https://www.wubin.work/blog/articles/567
下面使用一个更灵活的方式：
在src/common/js中，创建一个自定义的 console 包装器，console-wrapper.js：
// 保存原始的console方法
const originalConsole = {
log: console.log,
info: console.info,
warn: console.warn,
error: console.error,
debug: console.debug
};
// 创建包装函数
export function setupConsole() {
// 检查是否存在window.setting.console_open
const isConsoleEnabled = window.setting && window.setting.console_open !== false;
// 如果console被禁用，则重写所有console方法
if (!isConsoleEnabled) {
console.log = function() {};
console.info = function() {};
console.warn = function() {};
console.error = function() {}; // 可能希望保留error日志
console.debug = function() {};
} else {
// 恢复原始console方法
console.log = originalConsole.log;
console.info = originalConsole.info;
console.warn = originalConsole.warn;
console.error = originalConsole.error;
console.debug = originalConsole.debug;
}
}
// 导出一个方法用于动态切换console状态
export function toggleConsole(enabled) {
if (window.setting) {
window.setting.console_open = enabled;
} else {
window.setting = { console_open: enabled };
}
setupConsole();
}在 main.js 中引入并初始化：
import { setupConsole } from '@/common/console-wrapper';
// 在应用启动时设置console
setupConsole();
// 其他初始化代码...在 index.html 中添加设置
<!DOCTYPE html>
<html lang="">
<head>
<!-- ... 其他头部内容 ... -->
<script>
// 初始化全局设置
window.setting = {
console_open: false // 默认关闭console
};
</script>
</head>
<body>
<!-- ... 其他内容 ... -->
</body>
</html>
目录