vue 关闭log_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:[]
}
}
这个头像下方的黄色按钮,是根据card.isShow的truthy 决定显示或不显示。
当我点击按钮的时候,把card.isShow 的值变为 false。
可是页面上的黄色按钮还在,并没有如我期望的那样消失。
通过查询资料得知,使用this.$forceUpdate()可以重新渲染组件,这样就可以得到想要的效果。
cacelHandler(card){
card.isShow = false;
this.$forceUpdate();
}
vue官方对$forceUpdate的解释是:
$forceUpdate可以迫使 Vue 实例重新渲染。它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
以上这篇vue或react项目生产环境去掉console.log的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持云海天教程。
原文链接:https://blog.csdn.net/u010007013/article/details/93661737
vue 关闭log_vue或react项目生产环境去掉console.log的操作相关推荐
- console react 去除_vue或react项目生产环境去掉console.log的操作
在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console. 如果手动删除未免也太累了,再说以后想再开发还得重新写console. 事实上webpack提供了 ...
- 生产环境取消console.log
在vue.config.js文件中设置 configureWebpack: config => {//生产环境取消 console.logif (process.env.NODE_ENV === ...
- 多个vue项目生产环境下NGINX配置文件
多个vue项目生产环境下NGINX配置文件 使用场景 1.多个前端项目 2.多个后端项目 3.修改nginx配置后端接口转发路径 4.反向代理 某个目录下 带特定后缀名的文件 5.vue3项目 使用前 ...
- 从零搭建webpack的react开发/生产环境
一.初始化项目 在命令行中敲入如下命令: mkdir Webpack-react && cd Webpack-react && npm init -y 然后你就可以在你 ...
- vue配置开发、测试、生产环境(proxy中获取process.env.NODE_ENV)
先是看了这个文章写的如何npm run build 的时候自动配置地址 参考文章"vue配置开发.测试.生产环境(不同环境,不同命令)_Amy_cloud的博客-CSDN博客_vue生产环境 ...
- npm更新包(全局单个,项目单个,全局所有,项目生产环境,项目开发环境)
npm-check检查npm依赖包是否有更新,错误以及不在使用的. 安装npm-check npm install -g npm-check npm全局更新包 npm-check -u -g npm更 ...
- db2去除字段内容空格_Vue CLI3.x 配置指南生产环境去除console
天赋决定上限,努力决定下限 每天一个小技巧,每天一个优化点.慢慢积累慢慢总结. 生产环境去除console babel-plugin-transform-remove-console 官方地址 ya ...
- Vue项目如何过滤全部console.log输出(浅水魚)
Vue项目如何过滤全部console.log输出 在App.vue的created中调用一个consoleCancle方法 然后在methods中创建一个consoleCancle方法,让consol ...
- 如何移除项目中无用的 console.log 代码
大家好,我是若川.早些天时,我看到一个后端公众号发<辞退了一个前端>,当时还想着现在后端公众号都开始吊打前端了嘛.其中有个理由就是线上还一堆console.log...我猜很多人都会移除项 ...
最新文章
- 在终端执行 Python 代码的 6 种方法,原来还能这样!
- 用maven运行指定java类main方法
- oracle与db2 市场占有率,oracle 与 DB2 的区别
- 使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
- IDEA配置Docker一键部署SpringBoot项目(企业级做法)
- MySQL建表的限定于巨_Linux入门笔记(4/1/2016修改)
- pywin32官方说明文档_为什么你应该看官方文档而不是搜索博客文章
- redis数据类型:hashes
- his提供哪些服务_论文查重检测系统提供哪些服务
- C语言指针 与字符串的学习
- 微信小程序、小游戏反编译获取源码
- 设计模式——终结者模式
- 树莓派Python开发第8课: PWM实验
- SEO伪原创文章批量生成的方法「冷师兄」
- matplotlib添加字体、字体格式自定义
- 转 Apache Ignite——新一代数据库缓存系统
- 最小生成树Prim算法
- 夜战II-程序猿的骚文
- PAT 甲级1121 Damn Single
- zimbra mysql stopping_Zimbra中的MySQL
热门文章
- OpenCV Windows Pack but it has no binaries compatible with your configuratio
- Windows下编译TensorFlow1.3 C++ library及创建一个简单的TensorFlow C++程序
- win32thread.c:(.text+0x60):对‘_beginthreadex’未定义的引用
- FILLED is not a menber of 'cv' in opencv2.4.9
- 60 Celery队列
- 更新暂停,计划十一后继续
- 多线程还是多进程的选择
- Ansible批量添加远程登录用户
- matlab三角形旋转动态,新手向!用WebGL写一个旋转的动态三角形,总共分三步!!(注释超详细!!)...
- navicat修改sqlserver密码_oracle密码过期