下载插件
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 = config
.8.5 更新
使用上述方法有个缺陷，就是每次打包的时间太长。现在我已经弃用这种方法了，改成重写console.log()函数，效果更好，具体代码如下：
export function rewirteLog() {console.log = (function (log) {return process.env.NODE_ENV == 'development'? log : function() {}}(console.log))}
在main.js引入这个函数并执行一次，就可以实现原来的效果了。
