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 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 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使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Python读写配置文件的方法
2015/06/03 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
PyQt5实现简易电子词典
2019/06/25 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python 函数中的参数类型
2020/02/11 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
机械工程师岗位职责
2014/06/16 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
英文自荐信范文
2015/03/25 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
Win11查看设备管理器
2022/04/19 数码科技
SpringBoot Http远程调用的方法
2022/08/14 Java/Android