扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编这次要给大家分享的是Vue Cli3怎么打包配置并自动忽略console.log语句，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。
10余年的安顺网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整安顺建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“安顺网站设计”,“安顺网站推广”以来，每个客户项目都认真落实执行。
下载插件
npm i -D uglifyjs-webpack-plugin
在 vue.config.js 引入使用
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true,
},
},
}),
],
},
devServer: {
proxy: {
'/xxx': {
target: 'http://192.168.150.17:8080/',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/xxx': 'xxx',
},
},
},
},
publicPath: './',
}这时执行 npm run build 打包后的文件就没有 console.log 语句了。
不过这时会有一个问题，就是在开发环境的时候编译会非常慢。例如修改了一个变量的值，我的电脑要编译 10 秒才能重新刷出来页面，一直卡在 92% chunk asset optimization。
由于去掉 console.log 语句这个功能只有在打包时才需要，所以我们可以加一个判断，只在生产环境时才把上述配置代码加上。
所以正确的配置如下：
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const config = {
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: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true,
},
},
}),
],
}
}
module.exports = configvue-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']
看完这篇关于Vue Cli3怎么打包配置并自动忽略console.log语句的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网