vue-cli2,vue-cli3,vite Production environment removal

It is generally used in a development environment and needs to be removed in a production environment. If you delete it manually, it would be too tiring. We can use plug-ins to handle the specific environment globally.

vue-cli2

Project build in the following file:

plugins: [
    new ({
      '': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          //drop_console Pass true to abandon calls to the console.  *Function          drop_console: true,
          // pure_funces disable function          pure_funcs: ['']
        }
      },
      sourceMap: ,
      parallel: true
    }),
     
    ......
]

vue-cli3

Configuration in.

configureWebpack: config =&gt; {
    //Cancel of production environment    if (.NODE_ENV === 'production') {
      [0]..drop_console = true
    }
  },

If NODE_ENV is customized in the production environment file, not production, the above code or an error will be reported, and the minimum cannot be found, so try to set NODE_ENV in the production environment to production

Production environment NODE_ENV Custom or production, you can use the following code

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
configureWebpack: config =&gt; {
    //Cancel of production environment    if (.NODE_ENV === 'prod') {
        optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            // warnings: false,
                            drop_console: true, // Comment console                            drop_debugger: true,
                            pure_funcs: [''] //Remove console                        }
                    }
                })
            ]
        }
    }
  },

vite

When it is terser (terser needs npm to be installed separately):

npm add -D terser

Configuration.

import { defineConfig } from 'vite'
export default defineConfig( { 
...
    build : {
        minify : 'terser' ,
        terserOptions : {
            compress : {
                drop_console : true ,
                drop_debugger : true ,
            } ,
        } , 
    } ,
...
} )

2. When default is esbuild:

    build : {
        esbuild: {
            drop: mode === 'production' ? ['console', 'debugger'] : []
        },
    }

This is the article about removing vue-cli2, vue-cli3, vite production environment. For more related content for removing vue production environment, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!