快捷導(dǎo)航

Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法

更新時(shí)間：2023年06月29日 10:16:13 作者：zifengningyu

這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.Vue中異常處理包含以下幾個(gè)方面的技巧

errorHandler

errorHandler是Vue中最廣泛使用的異常處理方式

Vue.config.errorHandler = function(err, vm, info) {
}

err指代error對(duì)象，info是一個(gè)Vue特有的字符串，vm指代Vue應(yīng)用本身。記住在一個(gè)頁(yè)面你可以有多個(gè)Vue應(yīng)用。這個(gè)error handler作用到所有的應(yīng)用。

Vue.config.errorHandler = function(err, vm, info) {
    console.log(`Error: ${err.toString()}\nInfo: ${info}`);
}

warnHandlerwarnHandler用來(lái)捕獲Vue warning。記住在生產(chǎn)環(huán)境是不起作用的

Vue.config.warnHandler = function(msg, vm, trace) {
}

msg和vm都容易理解，trace代表了組件樹(shù)。請(qǐng)看下面的例子：

Vue.config.warnHandler = function(msg, vm, trace) {
    console.log(`Warn: ${msg}\nTrace: ${trace}`);
}

renderError

renderError 和前面兩個(gè)不同，這個(gè)技巧不適用于全局，和組件相關(guān)。并且只適用于非生產(chǎn)環(huán)境。

errorCaptured

errorCaptured是最后一個(gè)和Vue相關(guān)的技巧。當(dāng)捕獲一個(gè)來(lái)自子孫組件的錯(cuò)誤時(shí)被調(diào)用。此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來(lái)源信息的字符串。此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播。

window.onerror (不僅僅針對(duì)Vue)

2.vue3去除控制臺(tái)的warn 信息

const app =  createApp(App)
app.config.warnHandler = () => null

3.vue3生產(chǎn)環(huán)境配置不打印console.log

1.安裝插件

npm install babel-plugin-transform-remove-console --save-dev

2.babel.config.js中加入如下配置

const prodPlugin = []
if (process.env.NODE_ENV === 'production') {
    // 如果是生產(chǎn)環(huán)境，則自動(dòng)清理掉打印的日志，但保留error 與 warn
    prodPlugin.push([
        'transform-remove-console',
        {
            // 保留 console.error 與 console.warn
            exclude: ['error', 'warn']
        }
    ])
}
module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        ...prodPlugin
    ]
}

到此這篇關(guān)于Vue3 去除 vue warn 以及生產(chǎn)環(huán)境去除console.log的文章就介紹到這了,更多相關(guān)Vue3 去除 vue warn內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: