vue-cli 3.0 打包后删除 console.log

一、babel-plugin-transform-remove-console

1.先下载

npm install babel-plugin-transform-remove-console --save-dev

2. 在 babel.consig.js 中配置

if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "sit") {
  plugins.push("transform-remove-console");
}

二、terser-webpack-plugin

1.先下载

npm install terser-webpack-plugin --save-dev

2. vue.config.js 中引入

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

config.plugins.push(
  //去掉打包之后的打印
  new TerserPlugin({
    terserOptions: {
      ecma: undefined,
      warnings: false,
      parse: {},
      compress: {
        drop_console: true,
        drop_debugger: false,
        pure_funcs: ["console.log"], // 移除console
      },
    },
  })
);

3.完整版 vue.config.js

const TerserPlugin = require("terser-webpack-plugin");
// const CompressionWebpackPlugin = require('compression-webpack-plugin');
// const productionGzipExtensions = ['js', 'css'];
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  // 输出文件目录
  outputDir: "dist", // 默认dist
  // 用于嵌套生成的静态资产（js,css,img,fonts）目录
  // assetsDir: '',
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
  indexPath: "index.html", // Default: 'index.html'
  filenameHashing: true,
  // 构建多页时使用
  pages: undefined,
  // eslint-loader是否在保存的时候检查
  lintOnSave: false,
  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  transpileDependencies: [],
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...
      // const plugins = []
      // plugins.push(
      //     new CompressionWebpackPlugin({
      //         filename: '[path].gz[query]',
      //         algorithm: 'gzip',
      //         test: productionGzipExtensions,
      //         threshold: 10240,
      //         minRatio: 0.8
      //     })
      // )
      // config.plugins = [...config.plugins, ...plugins]
      config.plugins.push(
        //去掉打包之后的打印
        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ["console.log"], // 移除console
            },
          },
        })
      );
    } else {
      // 为开发环境修改配置...
    }
  },

  // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({ bypassOnDebug: true })
      .end();
    /*config.module
              .rule('images')
              .use('url-loader')
                .loader('url-loader')
                .tap(options => {
                  // 修改它的选项...
                  return options
                })*/
  },
  // css相关配置
  css: {
    // 启用 CSS modules
    requireModuleExtension: false,
    // 是否使用css分离插件
    extract: false,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      sass: { prependData: `@import "@/assets/css/reset.scss";` },
    },
  },
  // webpack-dev-server 相关配置
  devServer: {
    host: "0.0.0.0",
    port: 8080,
    https: false,
    open: true,
    hotOnly: false,
    proxy: null, // 设置代理
    disableHostCheck: true, // 禁用webpack热重载检查 解决热更新失效问题
    before: (app) => {},
  },
  // PWA 插件相关配置
  pwa: {},

  // 第三方插件配置
  pluginOptions: {
    // ...
  },
};