Delete the console. Log of the vue production environment

Business requirements:

With the development of project iterations, more and more code is generated, and most of the development environment requires console.log to print logs for corresponding processing, as well as the status of console.log() logs to locate bugs. During collaborative development, every developer may also print console.log. Sometimes they may be too busy to comment out the printed log, or they may print some log information that is related to user personal information security. None of this log information should appear on the console when in production. It’s certainly not realistic to go through and comment code one by one. Console. log can now be printed using third-party plug-ins. With the help of third-party plug-ins, you don’t have to worry about printing logs in the production environment.

Plugin use:

Installing a plug-in

yarn add babel-plugin-transform-remove-console -D
// or
npm install babel-plugin-transform-remove-console --save-dev
Copy the code

Note: Dependencies can be installed using YARN or NPM; -d is equivalent to –save-dev, which means to install dependencies in the development environment.

const plugins = ["@vue/babel-plugin-transform-vue-jsx"];
// Remove console from production environment
if (process.env.NODE_ENV === "production") {
	plugins.push("transform-remove-console");
}

module.exports = {
	plugins: plugins,
	presets: ["@vue/cli-plugin-babel/preset"]};Copy the code

Method 2:

module.exports = {
	presets: ["@vue/cli-plugin-babel/preset"].// Remove console from production environment
	env: {
		production: {
			plugins: ["transform-remove-console"]}}};Copy the code

Three:

const IS_PROD = ["production"."prod"].includes(process.env.NODE_ENV);

const plugins = [];

module.exports = {
   // Remove console from production environment
  plugins: plugins,
	presets: ["@vue/cli-plugin-babel/preset"]};Copy the code

Scheme 2

Installing a plug-in

yarn add terser-webpack-plugin -D
// or
npm install terser-webpack-plugin --save-dev
Copy the code

Note: Option 1 and Option 2 configurations remove console.log() are configured in babel.config.js.

Method of use

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

module.exports = {
  configureWebpack: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            pure_funcs: ["console.log"]}}})]}};Copy the code

Note: This code configuration is configured in vue.config.js.

Delete the console. Log of the vue production environment