console.log still showing in production build

[DarshanVirdi]

Hi Jayesh,

I have tried using the teresa plugin to remove the console.log from production build, but no success so far.

Following is my project vue.config.js

const { defineConfig } = require('@vue/cli-service');

//npm install terser-webpack-plugin --save-dev
const TerserPlugin = require('terser-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production';

module.exports = defineConfig({
    transpileDependencies: true,

    pluginOptions: {
        vuetify: {
            // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
        },
    },

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

Following is the package.json:

{
    "name": "consoletest",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "clean": "prettier .  --write",
        "format": "prettier .  --write"
    },
    "dependencies": {
        "@mdi/font": "latest",
        "@microsoft/signalr": "^6.0.6",
        "crypto-js": "^4.1.1",
        "roboto-fontface": "latest",
        "v-calendar": "^3.0.0-alpha.8",
        "vue": "^3.2.37",
        "vue-class-component": "^8.0.0-0",
        "vue-router": "^4.0.16",
        "vuetify": "npm:@vuetify/nightly@next",
        "vuex": "^4.0.2"
    },
    "devDependencies": {
        "@vue/cli-plugin-router": "^5.0.6",
        "@vue/cli-plugin-typescript": "^5.0.6",
        "@vue/cli-plugin-vuex": "^5.0.6",
        "@vue/cli-service": "^5.0.6",
        "eslint": "^8.17.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-prettier": "^4.0.0",
        "prettier": "^2.7.1",
        "sass": "^1.52.3",
        "sass-loader": "^13.0.0",
        "terser-webpack-plugin": "^5.3.3",
        "typescript": "^4.7.3",
        "vue-cli-plugin-vuetify": "2.5.1",
        "webpack-plugin-vuetify": "2.0.0-alpha.11"
    }
}

Can point out what am I missing?

Thank you, Darshan

[DarshanVirdi]

ignore, found a work around without using any other plugin

[JayeshLab]

Hi @DarshanVirdi, terser-webpack-plugin for drop_console is no longer working with latest @vue/cli-plugins version 5.x.x as might be because of migration to webpack 5 from webpack 4 version. Even I tested with the latest terser-webpack-plugin version for webpack 5 its not working. It might be issue with either vue cli plugins or terser-webpack-plugin. What work around you done to remove the console.log.

[DarshanVirdi]

Hi Jayesh,

implemented consolehandler.js as follows:

function overrideconsole() {
    var consoleHolder = window.console;
    var console = {};
    Object.keys(consoleHolder).forEach(function (key) {
        console[key] = function () {};
    });
    window.console = console;
}

export { overrideconsole };

call from app.vue

            if (process.env.NODE_ENV === 'production') {
                consolehandler.overrideconsole();
            }

As mentioned earlier, this is just a workaround, do let me know, if you have an other way to actully remove the console statement from the production build.

[joey998]

i had resolved this problem by add this to configureWebpack

devtool:
      process.env.NODE_ENV === "production"
        ? undefined
        : "eval-cheap-module-source-map",