当前位置: 首页 > Web前端 > vue.js

VueCli3打包配置--自动忽略console.log语句

时间:2023-04-01 13:01:54 vue.js

下载插件npmi-Duglifyjs-webpack-plugin在vue.config.js中引入usingconstUglifyJsPlugin=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:'./',}在这time执行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=config2020.8.5Update使用上面的方法有一个缺点,就是每次打包时间太长。现在我放弃了这种方法,改为重写console.log()函数,效果更好。具体代码如下:在main.js中引入这个函数,执行一次即可达到原来的效果。参考suglifyjs-webpack-plugin