Vue3 去除 vue warn 及生产环境去除console.log的方法
1.Vue中异常处理包含以下几个方面的技巧
- errorHandler
errorHandler是Vue中最广泛使用的异常处理方式
Vue.config.errorHandler = function(err, vm, info) { }
err指代error对象,info是一个Vue特有的字符串,vm指代Vue应用本身。记住在一个页面你可以有多个Vue应用。这个error handler作用到所有的应用。
Vue.config.errorHandler = function(err, vm, info) { console.log(`Error: ${err.toString()}\nInfo: ${info}`); }
warnHandlerwarnHandler用来捕获Vue warning。记住在生产环境是不起作用的
Vue.config.warnHandler = function(msg, vm, trace) { }
msg和vm都容易理解,trace代表了组件树。请看下面的例子:
Vue.config.warnHandler = function(msg, vm, trace) { console.log(`Warn: ${msg}\nTrace: ${trace}`); }
- renderError
renderError 和前面两个不同,这个技巧不适用于全局,和组件相关。并且只适用于非生产环境。
- errorCaptured
errorCaptured是最后一个和Vue相关的技巧。当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
- window.onerror (不仅仅针对Vue)
2.vue3去除控制台的warn 信息
const app = createApp(App) app.config.warnHandler = () => null
3.vue3生产环境配置不打印console.log
1.安装插件
npm install babel-plugin-transform-remove-console --save-dev
2.babel.config.js中加入如下配置
const prodPlugin = [] if (process.env.NODE_ENV === 'production') { // 如果是生产环境,则自动清理掉打印的日志,但保留error 与 warn prodPlugin.push([ 'transform-remove-console', { // 保留 console.error 与 console.warn exclude: ['error', 'warn'] } ]) } module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ ...prodPlugin ] }
到此这篇关于Vue3 去除 vue warn 以及生产环境去除console.log的文章就介绍到这了,更多相关Vue3 去除 vue warn内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
在vue中使用express-mock搭建mock服务的方法
这篇文章主要介绍了在vue中使用express-mock搭建mock服务的方法,文中给大家提到了在vue-test-utils 中 mock 全局对象的相关知识 ,需要的朋友可以参考下2018-11-11vue3+ElementPlus使用lang="ts"报Unexpected token错误的解决
最近开发中遇到了些问题,跟大家分享下,这篇文章主要给大家介绍了关于vue3+ElementPlus使用lang="ts"报Unexpected token错误的解决办法,需要的朋友可以参考下2023-01-01elementui的table根据是否符合需求合并列的实现代码
这篇文章主要介绍了elementui的table根据是否符合需求合并列的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
最新评论