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'] : []
},
}
到此这篇关于vue-cli2,vue-cli3,vite 生产环境去掉console.log的文章就介绍到这了,更多相关vue 生产环境去掉console.log内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
