vue项目在打包时，去掉所有的console.log输出

最新推荐文章于 2024-07-17 14:03:53 发布
最新推荐文章于 2024-07-17 14:03:53 发布
阅读量4.9k 收藏 16
点赞数 6
分类专栏： vue 文章标签： vue babel js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43242112/article/details/107834469
版权

vue项目在打包时，去掉所有的console.log输出

安装插件

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

添加配置

安装babel-plugin-transform-remove-console开发依赖，然后在项目的babel.config.js的plugin中添加节点。再build就不会有console警告了。
如下配置无论在开发环境还是生产环境都会去掉所有的console输出语句。
在这里插入图片描述
但是babel.config.js文件是全局共享的，无论是开发阶段还是生产阶段，都会移除所有的console，我们想在开发阶段保留console该怎么做呢？如下：
在这里插入图片描述
代码：

// 项目在发布时需要用到的babel插件数组
const proPlugins = []
最低0.47元/天 解锁文章
一羊迁徙
关注
  • 6
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue2 - 项目上线后生产环境中去除console.log的输出以及断点的解决方案
前端充电宝
06-27 340
当你准备将Vue.js应用程序部署到生产环境时，一个关键的优化步骤是移除代码中的所有语句以及断点。在开发阶段，是一个非常有用的调试工具，但在生产环境中保留它们可能会影响性能和安全性。在本文中，我将向你展示如何通过使用Vue CLI 2来自动化这一过程，确保你的应用在发布时不再包含任何。通过上述步骤，你可以轻松地在部署 Vue.js 应用程序到生产环境之前，自动化地移除所有语句。这不仅可以提高应用的性能，还可以减少潜在的安全风险。记得在开发过程中保留可以帮助你更轻松地调试代码，但在最终部署前要记得清理它们。
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
12-10
在现代前端开发中，Vue CLI 是一个非常流行的脚手架工具，它可以帮助开发者快速搭建 Vue.js 项目。然而，在实际的项目部署过程中，经常会遇到一些需要动态配置的问题，比如服务器接口地址、环境变量等。本篇文章将...
Vue Cli3 打包配置并自动忽略console.log语句的方法
10-15
主要介绍了Vue Cli3 打包配置并自动忽略console.log语句的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用vite打包 去除 Console & debugger
最新发布
csdn_bk的博客
07-17 328
选项不会缩减空格，因为会移除掉 pure 标注，导致破坏 tree-shaking。，它比 terser 快 20-40 倍，压缩率只差 1%-2%。可以禁用最小化混淆，或是用来指定使用哪种混淆器。注意，在 lib 模式下使用。时必须先安装 Terser。
vue项目在打包时,如何去掉所有的console.log输出
想好了再写！
02-17 1640
在项目的`babel.config.js`的plugins中添加节点。但是如下配置无论在开发环境还是生产环境都会去掉所有的console.log输出语句。==如过我们只想在生产环境才去掉console.log应该怎么配置呢？？？
vue或react项目生产环境去掉console.log的操作
10-14
主要介绍了vue或react项目生产环境去掉console.log的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 项目在打包上线时，去掉所有的console.log输出
是阿瑶的博客呀~
11-10 985
1.安装插件 yarn add babel-plugin-transform-remove-console -D 2.修改 babel.config.js 配置 // 项目在发布时需要用到的 babel 插件数组 const proPlugins = []; // 如果当前是development开发环境或者是production生产环境，则使用去掉 console 的插件 if (process.env.NODE_ENV === 'development' || process.env.NODE
vue打包去除console.log
weixin_43837268的博客
06-20 937
new webpack.optimize.UglifyJsPlugin({ compress:{ warnings: false, drop_debugger: true, drop_console: true } }) 在webpack.prod.conf.js中添加
VUE项目打包去掉console.log
weixin_56562996的博客
09-01 200
在vue.config.js中，配置： chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args }) }
【JavaScript源代码】Vue项目优化的一些实战策略.docx
12-29
6. **去除console.log**：在生产环境中，可以使用`transform-remove-console`插件移除代码中的`console.log`语句，这有助于减少生产构建的大小，因为这些语句在生产环境中通常无用。 7. **其他优化策略**：还可以...
vue 打包去除console.log()
jhs的博客
12-02 2338
忘记在哪里看到的,记录下 在vue.config.js中，配置 chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args }) }
vue项目打包去掉console.log
weixin_44740072的博客
09-25 770
vue项目打包时去掉console.log
VUE_项目打包去掉 console.log
小歪博客
09-16 1600
大家在项目开发的时候，需要看看一些后端接口返回的结果，会多次使用 console.log 项目开发完成打包的时候，发现控制台一堆的 console.log ，非常头疼，下面给大家推荐一下在 Vue 项目中一次性屏蔽所有的 console.log 的办法 在vue.config.js中，配置： chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOpt
vue打包时去掉所有的console.log
weixin_52361730的博客
08-05 175
1，下载插件 npm i babel-plugin-transform-remove-console -S 2，找到 babel.config.js 文件，为其配置属性即可 const proPlugins = [];// 开发环境 不做操作 // 生产环境，去掉console if (process.env.NODE_ENV === 'production') { proPlugins.push('transform-remove-console'); } module.exports = {
vue项目打包时清除console.log()
weixin_63035742的博客
09-14 1094
3、直接在main.js中给console.log定义一个空函数。1、在vue.config.js中，添加配置。
vue-打包上线之后去除console.log（）
路虽远行则将至，事虽难做则必成。
06-07 1694
在开发阶段我们经常为了调试代码会打印一些数据，方便查看和修改数据但是这些打印如果在生产环境下展示的话就不太有好了，可以借助插件和代码写法来解决不建议使用插件，可以在main.js（入口文件）和vue.config.js(环境文件)来解决。
Vue打包时生产去除console
qq_36051044的博客
12-20 768
Vue打包时生产去除console VSCode、Vetur、babel-plugin-transform-remove-consoleVue打包时生产去除console使用babel插件babel-plugin-transform-remove-console配置babel.config.js vue开发中，再dev本地调试会使用console.log()打印数据到控制台进行调试，希望在打包到生产自动去除这些console。 使用babel插件babel-plugin-transform-remove
vue3 打包的时候去掉console.log
05-23
在 Vue3 中，你可以通过在 `vue.config.js` 文件中配置 `configureWebpack` 来去掉打包后的 `console.log`。具体的步骤如下： 1. 在项目根目录下创建 `vue.config.js` 文件。 2. 在 `vue.config.js` 文件中添加以下代码： ```javascript module.exports = { configureWebpack: { optimization: { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { compress: { drop_console: true } } }) ] } } } ``` 3. 运行 `npm run build` 命令打包项目，打包后的文件中将不再包含 `console.log`。 需要注意的是，去掉 `console.log` 可以减少文件大小，但同时也会使得调试变得困难，因此建议在开发环境下保留 `console.log`。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值