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 相关文章推荐
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
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
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
domReady的实现案例
2016/11/23 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python中的ConfigParser模块使用详解
2015/05/04 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
AUC计算方法与Python实现代码
2020/02/28 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
绩效管理实施方案
2014/03/19 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
TS 类型兼容教程示例详解
2022/09/23 Javascript