console.log一般都是在开发环境下使用的,在生产环境下需要去除 ,如果手动删除未免也太累了,我们可以用插件对于具体环境全局处理。
vue-cli2
项目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
}),
......
]
vue-cli3
vue.config.js 里配置.
configureWebpack: config => {
//生产环境取消 console.log
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
}
},
如果生产环境的文件中NODE_ENV 自定义,不是production,上述代码或报错,会显示找不到minimizer, 所以生产环境的NODE_ENV 尽量设置为production
生产环境NODE_ENV 自定义或者为production,都可以用下面的代码
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
configureWebpack: config => {
//生产环境取消 console.log
if (process.env.NODE_ENV === 'prod') {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
// warnings: false,
drop_console: true, //注释console
drop_debugger: true,
pure_funcs: ['console.log'] //移除console
}
}
})
]
}
}
},
vite
1.build.minify为terser时(terser需要npm单独安装):
npm add -D terser
vite.config.ts 里配置.
import { defineConfig } from 'vite'
export default defineConfig( {
...
build : {
minify : 'terser' ,
terserOptions : {
compress : {
drop_console : true ,
drop_debugger : true ,
} ,
} ,
} ,
...
} )
2. build.minify默认为esbuild时:
build : {
esbuild: {
drop: mode === 'production' ? ['console', 'debugger'] : []
},
}