Vue3 Removal vue warn and production environment removal method

Exception handling includes the following tips

• errorHandler

errorHandler is the most widely used exception handling method in Vue

 = function(err, vm, info) {
}

err refers to the error object, info is a Vue unique string, and vm refers to the Vue application itself. Remember that on one page you can have multiple Vue apps. This error handler works on all applications.

 = function(err, vm, info) {
    (`Error: ${()}\nInfo: ${info}`);
}

warnHandlerwarnHandler is used to capture Vue warning. Remember that it doesn't work in a production environment

 = function(msg, vm, trace) {
}

Both msg and vm are easy to understand, and trace represents the component tree. Please see the following example:

 = function(msg, vm, trace) {
    (`Warn: ${msg}\nTrace: ${trace}`);
}

• renderError

renderError is different from the previous two. This technique does not apply to global and is related to components. And only for non-production environments.

• errorCaptured

errorCaptured is the last Vue-related trick. Called when an error from a descendant component is caught. This hook receives three parameters: an error object, an instance of the component where the error occurred, and a string containing the source information of the error. This hook can return false to prevent the error from continuing to propagate upwards.

• (not only for Vue)

2.vue3 removes the console's warning information

const app =  createApp(App)
 = () => null

3. The vue3 production environment configuration does not print

1. Install the plug-in

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

Add the following configuration

const prodPlugin = []
if (.NODE_ENV === 'production') {
    // If it is a production environment, the printed logs will be automatically cleaned, but the error and warning will be retained    ([
        'transform-remove-console',
        {
            // Reserved with            exclude: ['error', 'warn']
        }
    ])
}
 = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        ...prodPlugin
    ]
}

This is the article about Vue3 removal of vue warn and production environment removal. For more related Vue3 removal of vue warn, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!