vue-cli3打包后去掉控制台打印(console)
打包时过滤控制台打印
·
vue-cli3打包后去掉控制台打印(console)
代码正式环境发布之前,无特定需求应该删除一切控制台打印(代码每次push之前应检查是否带有console)
可以借助一些打包工具过直接滤掉,分享一些方法:
方法一: terser-webpack-plugin
通过npm包 terser-webpack-plugin 来实现
第一步:安装
npm install terser-webpack-plugin --save-dev
第二步:配置 (vue.config.js)
module.export = {
configureWebpack: (config)=>{
if(process.env.NODE_ENV === 'production'){
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
}
}
}
方法二:uglifyjs-webpack-plugin
- vue-cli2
plugins: [
new webpack.optimize.UglifyJsPlugin({ // 自动删除console.log
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
},
sourceMap: true
}),
// ...
]
- vue-cli3
【vue.config.js 】配置如下
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
configureWebpack: {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true,//console
drop_debugger: false,
pure_funcs: ['console.log'] // 移除console
}
}
})
]
}
}
方法三:babel-plugin-transform-remove-console【推荐】
$ npm install babel-plugin-transform-remove-console --save-dev
or
$ yarn add babel-plugin-transform-remove-console --dev
【babel.config.js】配置如下
const plugins = ["@vue/babel-plugin-transform-vue-jsx"]
// 生产环境移除console
if(process.env.NODE_ENV === 'production') {
plugins.push("transform-remove-console")
}
module.exports = {
plugins: plugins,
presets: [
[
'@vue/app', {
modules: false,
targets: {
browsers: ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4", "iOS >= 8"]
},
useBuiltIns: 'entry',
}
]
]
}
更多推荐
已为社区贡献3条内容
所有评论(0)