How to remove console logs from Production Build in Vue 3

Question

Here is my vue.config.js file. I have followed the instructions given here: https://github.com/JayeshLab/demo-vue-console-log-removal

Still I can see logs in browser, what else am I missing?

    const TerserPlugin = require("terser-webpack-plugin");
    const isProd = true 


    module.exports = {
        lintOnSave: false, 
        devServer: {
            proxy: 'http://localhost:3000/'
            
        },

        chainWebpack: config => {
            config.module
            .rule('vue')
                .use('vue-loader')
                .tap(args => {
                    
                })
        
        },

        configureWebpack: {
        optimization: {
            minimize: true,
            minimizer: isProd ? [ 
            new TerserPlugin({
                terserOptions: {
                compress: {
                    drop_console: true
                },
                output: {
                    comments: false
                }
                }
            })
            ] : []
        }
        }

    
        
    }

Does this answer your question? [Remove console.logs with Webpack & Uglify](https://stackoverflow.com/questions/41040266/remove-console-logs-with-webpack-uglify) — bassxzero, Apr 15 '21 at 10:02
I would suggest using https://github.com/mishoo/UglifyJS instead of the other package you found. It has way more support and seems to be used by a lot of people. — bassxzero, Apr 15 '21 at 10:03
Uglifyjs is being deprecated and not maintained, so I tried terser directly. But I can't seem to identify the mistake — Anirudh, Apr 15 '21 at 10:11

score 1 · Answer 1 · answered Apr 15 '21 at 13:03

Managed to solve it by changing babel.config.js configuration. Added transform-remove-console plugin

    const removeConsolePlugin = []

    if(process.env.NODE_ENV == 'staging' || process.env.NODE_ENV == 'production') {

    removeConsolePlugin.push("transform-remove-console")

    }


    module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: removeConsolePlugin
    }

How to remove console logs from Production Build in Vue 3

1 Answers1