下载插件
npm i -D uglifyjs-webpack-plugin

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: './',
}

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 语句了。 npm run build console.log 不过这时会有一个问题,就是在开发环境的时候编译会非常慢。例如修改了一个变量的值,我的电脑要编译 10 秒才能重新刷出来页面,一直卡在 92% chunk asset optimization。92% chunk asset optimization由于去掉 console.log 语句这个功能只有在打包时才需要,所以我们可以加一个判断,只在生产环境时才把上述配置代码加上。 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 = config


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 = config

vue-cli3.0 生产包去除console.log
vue-cli3.0 生产包去除console.logvue-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']
warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']