情景一:
最近,在新建的项目中,打包发布生产环境项目时,项目中没有注释掉的console语句会报error,虽然不影响最终的打包结果,但是终归看着不舒服。于是在网上几经查找,最终使用了下面的方案,得以解决。
其实解决办法不麻烦,将下面的代码放入项目的vue.config.js中(vue-cli3的webpack配置基本都在这个文件)。
代码加入以后, 可以使用 vue inspect --mode=production > output.js
命令审查项目的 webpack 配置,该命令会在项目中输出一个output.js的文件。如果设置成功,那么可以在output文件中,看到drop_console: true等等的配置
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
}
}
}
情景二:
对于项目中存在webpack.prod.conf.js这类文件的时候,可以直接在webpack.prod.conf.js(生产环境打包配置)中,找到
plugins ——>UglifyJsPlugin——>uglifyOptions,配置如下内容
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true, // 注释console
pure_funcs: ['console.log'] //移除console
}
}
})