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

在开发环境写了很多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中遇到数据更新但是页面没有更新的情况

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

首先，如上图的黄色按钮是通过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的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 深入浅析vue-cli@3.0 使用及配置说明

    使用vue-cli3已经有相当一段时间了,一直没怎么去注意其中的配置,所以趁着这段时间总结下应用过程中的一些经验,本文是从安装到开发使用的一个过程讲解,也可以说是新手向的文章,文字有点多,请耐心观看. (一)安装: 1.下载安装node: 登陆node官网并选择自己合适的node版本进行安装: 2.安装vue-cli脚手架工具 npm install -g @vue/cli # OR # 推荐使用 npm install -g yarn # 如果已有安装,此步骤不需要 yarn global a

  • vue-cli webpack2项目打包优化分享

    减小文件搜索范围 配置 resolve.modules Webpack的resolve.modules配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对.也不是绝对路径的写法时,会去 node_modules 目录下找.但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径:同样,对于别名(`alias)的配置

  • vue-cli3.0使用及部分配置详解

    好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架 搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个 在选择功能后,会询问更细节的配置, TypeScript: 是否使

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

    在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console. 如果手动删除未免也太累了,再说以后想再开发还得重新写console. 事实上webpack提供了删除console的插件,在vue-cli3里面是这样用的: 首先安装terser-webpack-plugin npm install terser-webpack-plugin -D 然后在vue.config.js文件里写插件的配置: module.exports = { configureW

  • Vue Cli3 打包配置并自动忽略console.log语句的方法

    下载插件 npm i -D uglifyjs-webpack-plugin 在 vue.config.js 引入使用 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { configureWebpack: { plugins: [ new UglifyJsPlugin({ uglifyOptions: { compress: { drop_console: true, }, }, }), ],

  • Vue移动端项目实现使用手机预览调试操作

    最近在开发移动端Vue移动端项目,查了一些资料,这里分享下如何在webpack工具构建下的vue项目,在手机端调试和预览,言归正传. 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器,使用同一个wifi: b.笔记本也可以直接启用一个wifi,手机链接笔记本wifi也可以: 2.查询本地IP地址 WIN+R,输入cmd回车,打开命令提示符,输入ipconfig,查看本地IPv4: 3.修改本地项目中IP地址 找到项目中config文件夹,下面index.js文件打开: 找

  • Rainbond调用Vue React项目的后端接口

    Rainbond调用Vue React项目的后端接口

    目录 前言 解决跨域对于不同的场景有以下几种方法: 接口没有统一 接口统一 源码部署后端 Dockerfile源码构建部署Mysql Docker镜像部署Redis Java源码构建部署 SpringBoot Rainbond中怎么部署 Vue .React 项目请参考 Rainbond部署Vue.React项目 前言 以往我们在部署前端项目后,调用后端接口有以下几种场景: 后端接口没有统一,比较分散,例如:/system/user,/tool/gen . 通常我们会在项目的全局配置文件.env

  • Rainbond对前端项目Vue及React的持续部署

    Rainbond对前端项目Vue及React的持续部署

    目录 前言: 部署前检查 1.1 添加 nodestatic.json 文件 1.2 添加 web.conf 文件 1.3 源码部署Vue项目 常见问题 前言: 以往我们在部署 Vue.React 前端项目有几种方法: 项目打包好之后生成dist目录,将其放入nginx中,并进行相应的访问配置. 将项目打包好放入tomcat中. 将项目打包好的dist目录中的static和index.html文件放入springboot项目的resources目录下 直接运行一个前端server,类似本地开发那

  • Vue Cli3 创建项目的方法步骤

    Vue Cli3 创建项目的方法步骤

    最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 1. 安装 npm install -g @vue/cli 2. 创建一个项目 vue create iview-admin # OR vue ui default (babel, eslint) 默认套餐,提供 babel 和 eslint 支持. Manually select features 自己去选择需要的功能,提供更多的特性选择.比如如果想要支持 Ty

  • 详解Django+Uwsgi+Nginx的生产环境部署

    使用runserver可以使我们的django项目很便捷的在本地运行起来,但这只能在局域网内访问,如果在生产环境部署django,就要多考虑一些问题了.比如静态文件处理,安全,效率等等,本篇文章总结归纳了一下基于uwsgi+Nginx下django项目生产环境的部署 准备条件: 1.确保有一个能够用runserver正常启动的django项目 2.项目已上传到linux 3.linux上已部署好python环境,且已安装好项目所需的模块 安装uwsgi uwsgi是python的一个模块,安装u

  • TypeScript在React项目中的使用实践总结

    序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念.关于TS的类型查看可以使用在线TS工具

  • vue项目在打包时,如何去掉所有的console.log输出

    vue项目在打包时,如何去掉所有的console.log输出

    目录 vue打包去掉所有的console.log输出 安装插件 添加配置 vue npm run build 打包去掉console和警告 其实就两行代码就可以了 vue打包去掉所有的console.log输出 安装插件 npm install babel-plugin-transform-remove-console --save-dev 添加配置 安装babel-plugin-transform-remove-console开发依赖,然后在项目的babel.config.js的plugin中

  • jenkins分环境部署vue/react项目的方法步骤

    jenkins分环境部署vue/react项目的方法步骤

    vue/react部署请参考上一篇文章:https://www.jb51.net/article/238583.htm 项目开发正常都需要开发环境.测试环境.生产环境,每个环境部署都比较麻烦,可以使用jenkins自动化部署 1.安装自定义参数化插件 Extended Choice Parameter Plug-In 2.配置自定义参数 3.配置shell脚本 shell脚本内容 #!/bin/bash // 判断环境 if [ $env == "dev" ]; then url=&q

随机推荐