vue实现打包上线优化去除console.log 附有源码-前端-E先生的博客

1.下载包

npm install babel-plugin-transform-remove-console --save-dev

2.找到babel.config.js文件.然后修改代码.

const pluginss = []
//判断当前状态.  当现在是上线状态的时候.把console去除.如果不是.就不用执行下面的代码
if (process.env.NODE_ENV === 'production') { // todo  if判断是否打包,打包环境下控制台去掉console.log,也可去掉if判断，整个项目不会出现console.log(不建议)
  pluginss.push('transform-remove-console')
}

module.exports = {
 
//这里是添加.不是直接复制粘贴覆盖自己的全部代码.
plugins: [
    ...pluginss,
    [
}

或者

babel.config.js 修改后：

const plugins = []
 
if(process.env.NODE_ENV === 'production') {
    plugins.push(["transform-remove-console",{"exclude":["error","warn"]}])
}
 
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    '@vue/app'
  ],
  plugins
}

3.打包项目

执行：npm run build

二、也可以在config中设置（在vue.config.js中添加下面的代码即可）

// vue-cli version > 3
modeule.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV === "production") {
            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
        }
    },
}

本文来自E先生的博客，如若转载，请注明出处：https://www.javajz.cn