vue实现打包上线优化去除console.log 附有源码-前端-阿习进阶博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

vue实现打包上线优化去除console.log 附有源码

[导读]:1.下载包npminstallbabel-plugin-transform-remove-console--save-dev2.找到babel.config.js文件.然后修改代码.constpluginss=[]//判断当前状态.当现在是上线状态的时候.把console去除.如果不是.就不用执行下面的代码if(process.env.NODE_ENV===...

1.下载包

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

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

image.png

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;
        }
    },
}



本文来自阿习进阶博客,如若转载,请注明出处:https://yanxias.com

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

联系人:阿习

手机号:156****7890

留言内容:欢迎大家一起讨论文章,有喜欢发帖的可以私聊我给你开权限,发文章

留言时间:2022-05-09 17:46:15

回复内容:互联网阿习

回复时间:2022-05-09 17:46:15

用户IP:220.***.***.232

用户操作系统:Windows 10

欢迎加Easy的QQ