首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 去除 vue warn

Vue3 去除 vue warn 及生产环境去除console.log的方法

2023-06-29 10:16:14 作者：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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！