Vue项目如何过滤全部console.log输出（浅水魚）

原创 已于 2022-02-24 10:29:17 修改 · 744 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #javascript #webpack
于 2022-02-24 10:24:13 首次发布
这篇博客介绍了如何在Vue项目中阻止console.log的输出。作者在App.vue的created方法中调用了consoleCancle方法，该方法通过覆盖console.log实现禁用。虽然作者提到的直接方法可能不是最佳实践，并且感觉使用webpack配置更复杂，但此方法对于个人项目来说足够简单实用。

Vue项目如何过滤全部console.log输出

  1. 在App.vue的created中调用一个consoleCancle方法
  2. 然后在methods中创建一个consoleCancle方法，让console.log=functio(){}，
  3. 感觉这种方法不是太好，网上都是webpack啥的，看得我一脸懵，没怎么用过，先记录一下，自用
  4. 上图
    在这里插入图片描述
filter-console过滤掉不需要的console.log()输出
08-07
filter-console：过滤掉不需要的console.log()输出
过滤掉不需要的`console.log（）`输出-JavaScript开发
05-26
filter-console过滤掉不需要的console.log（）输出当您不控制输出时（例如，从第三方React组件中过滤掉PropType警告），该功能很有用。 安装$ npm install fi filter-console过滤掉不需要的console.log（）输出当您不控制输出时（例如，从第三方React组件中过滤掉PropType警告）可能很有用。 安装$ npm install filter-console用法const filterConsole = require（'filter-console'）; const disableFilter = filterConsole（[':panda:']）; const log =（）=> {console.log（''）; console.log（':unicorn:'）; console.log（':panda:'）; console.log（':dog_face:'）; }; 日志（）; disableFilter（）; 日志（）; $ node example.js:unicorn::dog_face::panda:
Vue 项目上线时如何去掉代码中的console 打印信息
qq_39399050的博客
02-16 2906
一、安装插件 babel-plugin-transform-remove-console 命令：npm install babel-plugin-transform-remove-console --save 二、修改项目根目录下babel.config.js babel.config.js 修改前 babel.config.js 修改后： const plugins = [] if(proce...
vue 生产环境过滤所有的console打印
weixin_49518866的博客
10-30 513
vue 生产环境过滤所有的console打印
Vue.js：部署时自动过滤console.log语句
Oruizn的博客
03-20 841
在开发阶段的时候我们会经常在前端项目里面使用console.log来输出、调试代码，当要将这个项目部署到服务器时，首先我们不想把这些信息暴露给用户，其次这些console.log函数会一定程度上影响代码的执行效率。所以我们在打包发布部署时，需要将这些console.log语句给屏蔽掉。
vue-打包上线之后去除console.log（）
路虽远行则将至，事虽难做则必成。
06-07 2281
在开发阶段我们经常为了调试代码会打印一些数据，方便查看和修改数据但是这些打印如果在生产环境下展示的话就不太有好了，可以借助插件和代码写法来解决不建议使用插件，可以在main.js（入口文件）和vue.config.js(环境文件)来解决。
vue打包过滤掉‘console.log’
fly_vip的博客
04-21 569
1、找到这个文件 2、添加一下代码 3、测试，时间原因，没有测试，应该是没有问题的，有问题后期更新 代码： new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, // 打包后 log 就不会出现了 drop...
jQuery插件开发实战：生产级轮播插件slideDeck设计与实现
最新发布
dianlu5775的博客
06-14 368
jQuery插件是一种基于jQuery.fn扩展机制的前端模块化技术，其核心在于遵循链式调用、多元素遍历、命名空间事件和数据隔离四大运行时契约。它并非过时语法糖，而是面向政企、金融等存量系统演进的关键工程能力，支撑安全扩展现有DOM交互逻辑。技术价值体现在状态托管可靠、IE11兼容性强、销毁可控且内存泄漏风险低，广泛应用于医保平台、银行后台、教育SaaS等需长期维护的老系统改造场景。本文以可嵌入、可销毁、支持Promise的slideDeck轮播插件为范例，详解IIFE封装、构造函数+原型模式、deepEx
vue webpack build 打包过滤console.log（）日志
mengty的博客
08-24 9708
webpack.config.js 的 plugins 里面加上 vue cli创建项目在 webpack.prod.conf.js文件new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_debugger: true, drop_console:
Vue cli3 实现去除console.log 去除控制台输出
u013611033的博客
02-03 5031
下载移除控制台输出的包 npm install babel-plugin-transform-remove-console --save-dev 新建 babel.config.js let plugins = [ vant插件的按需加载 [ 'import', { libraryName: 'vant', libraryDi...
vue打包后过滤console.log和debugger
Little_Pig_Bug的博客
09-17 4015
vue-cli搭建的项目 在build下的webpack.prod.conf.js下添加如下代码 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: true, drop_debugger:true }, ...
Vue2.x教程之filter过滤器的使用
热门推荐
itKingOne的博客
07-04 1万+
vue2.0以后已经放弃对自带的过滤器函数，但同时对开发人员提供了一个filter 的处理器，虽然命名为  filter  ，但是我觉得叫做数据处理器更体贴。用以在不改变的data 的情况下  输出前段需要的格式数据。 基本调用方法： [html] view plain copy span style="color: rgb(82, 8
JavaScript中数据过滤的几种方法
zzx262625的博客
10-08 5920
JavaScript是一种广泛使用的编程语言，它提供了多种方法来对数据进行过滤。在本文中，我们将介绍JavaScript中常见的几种数据过滤方法，并提供相应的示例。
vue中console.log()输出【object,object】的解决方法
zsj_javaer的博客
08-05 3671
vue中console.log()打印输出【object,object】的解决方法
让人眼前一亮的console.log 替代方案汇总
web前端开发
07-20 761
英文 | https://medium.com/frontend-canteen/use-these-methods-instead-of-console-log-to-make-your-console-more-clear-and-beautiful-59bbcc5a2a97翻译 | web前端开发（ID：web_qdkf)console.log 很棒，它可能是我们日...
vue.js:基于nodejs使用log4js输出日志文件
奋斗鱼
11-29 1万+
一、问题 开发web项目过程中，常规的console.log()只是将信息反映在了浏览器的控制台，我们经常需要输出到文本日志文件，以便开发调试和维护排查。 下面介绍log4js在vue项目中的部署与使用。 二.解决方案 1.安装log4j // 注意：如果只执行npm install XXX,没有指定安装到那种环境下的“后缀”，就会发现node-modules中安装了，但是package.json中没有的情况。 // 1、保存到开发依赖(devDependencies): npm install
vue的简单学习
weixin_42196338的博客
10-24 3029
vue的简短学习
vue实现打包去除console.log
LennieGao的博客
05-21 1万+
好好学习 ，天天向上。Are you ready? 代码奉上！！！！！！！！！ 首先下载插件 npm install babel-plugin-transform-remove-console --save-dev 然后创建或进入项目根目录下babel.config.js文件 代码如下 let plugins = []; if (process.env.NODE_ENV === "production") { // todo if判断是否打包,打包环境下控制台去掉console.log,也可去掉
Vue去掉线上的console.log，简单的方法
weixin_38010398的博客
01-21 3320
看了用vue cli设置，试了一下也没起作用。就想了别的不成熟的方法来解决。 在util里写一个控制console的函数 let env = 'pro';//设置全局的console是否生效的条件,开发情况下允许console function selfLog (x){ if(env === 'dev'){ console.log(x) } } ...
chrome调试 console.log 技巧
changpnazzp的专栏
08-07 736
相信从事前端开发的您，一定不会陌生这款和firebug同样强大的Chrome dev tools，它让所有的代码调试都变得如此可爱。   1. 3D Text: console.log('%c小傻逼,~mua~mua~~', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值