Vue Cli3 打包配置并自动忽略console.log语句的方法
下载插件
npmi-Duglifyjs-webpack-plugin
在vue.config.js引入使用
constUglifyJsPlugin=require('uglifyjs-webpack-plugin')
module.exports={
configureWebpack:{
plugins:[
newUglifyJsPlugin({
uglifyOptions:{
compress:{
drop_console:true,
},
},
}),
],
},
devServer:{
proxy:{
'/xxx':{
target:'http://192.168.150.17:8080/',
changeOrigin:true,
ws:true,
pathRewrite:{
'^/xxx':'xxx',
},
},
},
},
publicPath:'./',
}
这时执行npmrunbuild打包后的文件就没有console.log语句了。
不过这时会有一个问题，就是在开发环境的时候编译会非常慢。例如修改了一个变量的值，我的电脑要编译10秒才能重新刷出来页面，一直卡在92%chunkassetoptimization。
由于去掉console.log语句这个功能只有在打包时才需要，所以我们可以加一个判断，只在生产环境时才把上述配置代码加上。
所以正确的配置如下：
constUglifyJsPlugin=require('uglifyjs-webpack-plugin')
constconfig={
devServer:{
proxy:{
'/xxx':{
target:'http://192.168.150.17:8080/',
changeOrigin:true,
ws:true,
pathRewrite:{
'^/xxx':'xxx',
},
},
},
},
publicPath:'./',
}
if(process.env.NODE_ENV==='production'){
config.configureWebpack={
plugins:[
newUglifyJsPlugin({
uglifyOptions:{
compress:{
drop_console:true,
},
},
}),
],
}
}
module.exports=config
vue-cli3.0生产包去除console.log
不安装插件去除console.log的方法
vue-cli3.0在打包过程中就使用了terser-webpack-plugin插件进行优化，具体配置可以node_modules/@vue/cli-service/lib/config/prod.js中看到。
这里使用了环境变量进行控制，只有打生产包的时候才会调用这个插件进行打包优化。
terser-webpack-plugin的具体配置在同一个文件夹下terserOptions.js中，只要在这个文件中compress对象中加入以下几个属性就可以了
warnings:false, drop_console:true, drop_debugger:true, pure_funcs:['console.log']
到此这篇关于VueCli3打包配置并自动忽略console.log语句的方法的文章就介绍到这了,更多相关VueCli3打包并忽略console.log内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！