SoFunction
Updated on 2025-04-05

How to automatically block console in Vue production environment

Vue production environment automatically blocks console

background

Logs that are being typed in development may be forgotten to delete them, resulting in logs being typed after posting the production version

In order to ensure that the production environment is not affected by this

Therefore, the console is automatically blocked in production environment;

principle

When the project is initialized, judge the environment. If it is a production environment, replace the console's pointing;

accomplish

Insert the following code in

// Block console(function shieldConsole() {
    if (.NODE_ENV == "production") {
        (console).map(key => {
            if (typeof console[key] == "function") {
                console[key] = () => {};
            }
        });
    }
    return;
})();
  • console is a symbol type, so you need to use () and () to traverse.
  • Note that after using() traversal, it will bring a built-in symbol object.
  • Change all methods of console to empty the function and will not return

Cancel console after Vue packages

 = {
chainWebpack(config) {
    //delete console
    ('terser').tap((args) => {
      args[0]..drop_console = true
      return args
    })
  }
  }

Add this code to

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.