Vue3 去除 vue warn 及生产环境去除console.log的方法
更新时间：2023年06月29日 10:16:13 作者：zifengningyu
这篇文章主要介绍了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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Element Card 卡片的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
本文将详细介绍通过Vue使多元素进行过渡动画,需要的朋友可以参考下2020-02-02
petite-vue 是为渐进增强而优化的另一种 Vue 发行版,它提供与标准 Vue 相同的模板语法和反应性心智模型,这篇文章主要介绍了petite vue 基本使用指南,需要的朋友可以参考下2024-07-07
在Vue中最重要、最核心的概念之一就是响应式系统。这个系统使得Vue能够自动追踪数据变化，并在数据发生变化时自动更新相关的DOM元素。本文将会探讨Vue响应式系统的实现原理及其底层实现2023-03-03
这篇文章主要为大家详细介绍了vue+elementUI实现简单日历功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了三步搞定:Vue.js调用Android原生操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue中touch和click共存的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
浅析vue 函数配置项watch及函数 $watch 源码分享
这篇文章主要介绍了vue 函数配置项watch及函数 $watch 源码分享 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了mpvue+vant app搭建微信小程序的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vue+element项目里实时监听某个div宽度的变化,然后执行相应的事件,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-08-08
最新评论