In a development environment, some console output is available for debugging purposes, but if you forget to delete or comment it and package it into production, it can be unfriendly and ambiguous. Here are a few ways to implement global control of console.log output based on environment variables

Method 1: Global definition

1. Global definition defines functions

function consoleCancle(sign) {
  console.log = (function (oriLogFunc) {
    return function () {
      if (sign) {
        oriLogFunc.apply(this, arguments);
      }
    }
  })(console.log)
}
Copy the code

2, according to different environment Settings

Vue. Prototype. $baseUrl = "http://10.224.202.220:10006"} else if (process. The env. NODE_ENV = = = 'production') {/ / production environment // Check whether the log debugging function is enabled in the configuration file. If logDebug is true, the output is displayed. If logDebug is set to False, no output is generated. The console not print log Vue. Prototype. $baseUrl = "http://110.24.202.10:10006" const logDebug = false; consoleCancle(logDebug) }Copy the code

支那Method 2: Installation支那terser-webpack-plugin

npm install terser-webpack-plugin -D

Write the plugin configuration in the vue.config.js file:

1. Modify webPack configuration directly

If (process.env.node_env === 'production') {config. Mode = 'production' Console. The log output console not config. Optimization. Minimizer [0]. Options.terserOptions.com. Press drop_console = true} else {/ / Config. Mode = 'development'} // Config. Assign (config.resolve, {alias: {'@': path.resolve(__dirname, './src') } }) },Copy the code

2. Vue can also return an object that will be merged

If (process.env.node_env === 'production') {return {optimization: {minimizer: [ new TerserPlugin({ sourceMap: false, terserOptions: { compress: { drop_console: true } } }) ] } } } },Copy the code

Note: This method may cause the following error when packaging

The above problem is caused by the terser-webpack-plugin version.

You are recommended to use [email protected], update the version, and repackage it.

Method 3: Installation uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin -D

Const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’);

If (process.env.node_env === 'production') {config.plugins.push(// add code compression tool, Console new UglifyJsPlugin({uglifyOptions: {drop_debugger: true, drop_console: true } }, sourceMap: false, parallel: true }) ) } },Copy the code

Method 4: Installation* * * *babel-plugin-transform-remove-console

npm install ****babel-plugin-transform-remove-console -D

Write the plugin configuration in the babel.config.js file:

1. Method 1

NODE_ENV === 'production') {plugins.push('transform-remove-console')} module.exports = { plugins: plugins, presets: ['@vue/cli-plugin-babel/preset'] }Copy the code

2. Method two

  presets: ['@vue/cli-plugin-babel/preset'],
  env: {
    production: {
      plugins: ['transform-remove-console']
    },
    development: {
      plugins: ['dynamic-import-node']
    }
  }
}
Copy the code