vue或react项目生产环境去掉console.log的操作


Posted in Javascript onSeptember 02, 2020

在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。

如果手动删除未免也太累了,再说以后想再开发还得重新写console。

事实上webpack提供了删除console的插件,在vue-cli3里面是这样用的:

首先安装terser-webpack-plugin

npm install terser-webpack-plugin -D

然后在vue.config.js文件里写插件的配置:

module.exports = {
 configureWebpack: (config)=>{
 if(process.env.NODE_ENV === 'production'){
  config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
 }
 }
}

2020.1.14补充:

上面的写法是直接修改webpack的配置,vue官方文档里说也可以返回一个将会被合并的对象,写法如下:

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
 configureWebpack: (config)=>{
 if(process.env.NODE_ENV === 'production'){
  // 返回一个将会被合并的对象
  return {
  optimization:{
  minimizer: [
 new TerserPlugin({
 sourceMap:false,
 terserOptions:{
  compress:{
  drop_console : true
  }
 }
 })
   ]
 }
 }
 }
 }
}

2020.4.22补充:

最近在做react项目的时候发现它的webpack的配置,也可以使用terser去掉console.log。

webpack.config.prod.js:

module.exports = {
 optimization:{
 minimizer: [
 new TerserPlugin({
  sourceMap:false,
 terserOptions:{
 compress:{
  drop_console : true
 }
 }
 })
 ]
 }
}

补充知识:vue中遇到数据更新但是页面没有更新的情况

今天在项目中遇到了一个需求,点击改变数据,之后在页面上立即看到更改后的数据。

vue或react项目生产环境去掉console.log的操作

首先,如上图的黄色按钮是通过v-for 循环产生的,data()里只有数据cards:[ … ],cards的值是通过调用后台接口拿到的。

data(){
 return {
 cards:[]
 }
}
<div v-for="card in cards" :key="card.id">
 <img src="xxx" />
 <div v-if="card.isShow" @click="cacelHandler(card)">
 <img src="xxxx" />
 </div>
</div>

这个头像下方的黄色按钮,是根据card.isShow的truthy 决定显示或不显示。

当我点击按钮的时候,把card.isShow 的值变为 false。

可是页面上的黄色按钮还在,并没有如我期望的那样消失。

通过查询资料得知,使用this.$forceUpdate()可以重新渲染组件,这样就可以得到想要的效果。

cacelHandler(card){
 card.isShow = false;
 this.$forceUpdate();
}

vue官方对$forceUpdate的解释是:

$forceUpdate可以迫使 Vue 实例重新渲染。它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

以上这篇vue或react项目生产环境去掉console.log的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
微信小程序自动客服功能
Nov 02 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
JS继承实现方法及优缺点详解
Sep 02 #Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 #Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 #Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 #Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 #Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 #Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 #Javascript
You might like
php购物车实现代码
2011/10/10 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Django开发中的日志输出的方法
2018/07/02 Python
python实现Flappy Bird源码
2018/12/24 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
办公室前台岗位职责范本
2013/12/10 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
农村文化活动总结
2014/08/28 职场文书
三好生演讲稿
2014/09/12 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
搞笑欢迎词大全
2015/09/30 职场文书