五, Vueのvue-cli2和vue-cli3生产环境去掉console.log_vue2 生产环境去除console

在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。如果手动删除未免也太累了，再说以后想再开发还得重新写console。webpack提供了删除console的插件，这里分两种：

vue-cli2 生成环境去除console.log

1. 项目build 下面webpack.prod.config.js 文件中:

plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          //drop_console  传递true以放弃对控制台的调用。*功能
          drop_console: true,
          // pure_funces 禁用console.log函数
          pure_funcs: ['console.log']
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
     
    ......
]

注意：搜索plugins 这个下面，UglifyJsPlugin 默认已经安装了,只需要添加 drop_console: true, pure_funcs: ['console.log']

代码参照如上即可, 我就是这样添加的.

vue-cli3 生成环境去除console.log

1. 只有vue.config.js 里配置.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
configureWebpack: {
        //注释console
        optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            // warnings: false,
                            drop_console: false, //注释console
                            drop_debugger: false,
                            pure_funcs: ['console.log'] //移除console
                        }
                    }
                })
            ]
        }
 
 }

2. 需先安装 uglifyjs-webpack-plugin 插件

npm install uglifyjs-webpack-plugin --save-dev

注意： npm run build 打包报错，提示UglifyJs Unexpected token: keyword «const» ......

UglifyJs当前的版本不支持es6的写法，其中一种解决的办法就是升级更新UglifyJs的版本

npm i uglifyjs-webpack-plugin@1

如果提示出错可以改用淘宝镜像来安装

cnpm i uglifyjs-webpack-plugin@1

安装好之后就可以使用npm run build

以上配置就这么多，如果还有问题，可以加入扣扣群：316567839