vue项目打包清除console.log的4种方法

 更新时间:2023年11月24日 10:14:45   作者:小木木007  
项目打包的时候想要删除console.log,本文主要介绍了vue项目打包清除console.log的4种方法,具有一定的参考价值,感兴趣的可以了解游戏

记录一下项目中碰到的小问题,打包清除console.log的方法,vue2,vue-cli5.0.0(得注意一下自己项目的vue-cli版本)

第1种:

uglifyjs-webpack-plugin插件,配置在vue.config.js中,不支持es6,已归档,不再维护,不推荐,vue-cli3,4可行,vue-cli5中未生效。(我项目中未生效,不附代码,可自行搜索尝试)

第2种:

terser-webpack-plugin插件,配置在vue.config.js中,vue-cli5自带,vue-cli3,4需要下载插件,vue-cli3,4可行,vue-cli5中已无默认对应配置属性’drop_console’,自己添加后依旧未生效。(我项目中未生效,不附代码,可自行搜索尝试)

第3种:

babel-plugin-transform-remove-console插件,配置在babel.config.js中,vue-cli5实测可行,vue-cli3,4也可行。(尝试后,谷歌浏览器控制台仅websocket的打印输出未清除,其他打印输出都是清除干净了的)

下载依赖

npm install babel-plugin-transform-remove-console -D
or
yarn add babel-plugin-transform-remove-console -D

babel.config.js中

const proPlugins = [];
// 判断环境
if (process.env.NODE_ENV === 'production') {
  proPlugins.push('transform-remove-console');
}
module.exports = {
  plugins: [...proPlugins],
};

第4种:

不用插件,main.js中判断生产环境后window.console.log = function (){};即可,vue-cli5实测可行,vue-cli3,4也可行。(尝试出来的效果是清除得最干净的,但不清楚这种侵入式覆盖的写法有啥弊端没有)

main.js中

// 正式环境清除所有console.log
if (process.env.NODE_ENV === 'production') {
  if (window) {
    window.console.log = function () {};
  }
}

到此这篇关于vue项目打包清除console.log的4种方法的文章就介绍到这了,更多相关vue打包清除console.log内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue结合leaflet实现鹰眼图

    vue结合leaflet实现鹰眼图

    本文主要介绍了vue结合leaflet实现鹰眼图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    这篇文章主要介绍了vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue动态生成新表单并且添加验证校验规则方式

    vue动态生成新表单并且添加验证校验规则方式

    这篇文章主要介绍了vue动态生成新表单并且添加验证校验规则方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue.js 实现v-model与{{}}指令方法

    vue.js 实现v-model与{{}}指令方法

    这篇文章主要介绍了vue.js 实现v-model与{{}}指令方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vue实现前端拖拽div位置交换的方法详解

    vue实现前端拖拽div位置交换的方法详解

    这篇文章主要介绍了如何使用Vue技术实现一个简单的备忘录应用,包括添加条目和拖拽条目两个功能,文章还详细解释了如何使用Vue的draggable属性和JavaScript获取同级元素节点的方法,需要的朋友可以参考下
    2025-01-01
  • vue打包添加gzip配置项方式

    vue打包添加gzip配置项方式

    这篇文章主要介绍了vue打包添加gzip配置项方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 在 Vue 3 中设置 `@` 指向根目录的几种常见方法汇总

    在 Vue 3 中设置 `@` 指向根目录的几种常见方法汇总

    在 Vue 3 项目开发中,为了方便管理和引用文件路径,设置 @ 指向根目录是一项常见的需求,下面给大家分享在Vue3中设置 `@` 指向根目录的方法汇总,感兴趣的朋友一起看看吧
    2024-06-06
  • vue父组件数据更新子组件相关内容未改变问题(用watch解决)

    vue父组件数据更新子组件相关内容未改变问题(用watch解决)

    这篇文章主要介绍了vue父组件数据更新子组件相关内容未改变问题(用watch解决),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue3结合TypeScript项目开发实践总结

    Vue3结合TypeScript项目开发实践总结

    本文主要介绍了Vue3结合TypeScript项目开发实践总结,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue的百度地图插件尝试使用

    Vue的百度地图插件尝试使用

    本篇文章主要介绍了Vue的百度地图插件尝试使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论