将Vue2中的console.log()调试信息移除

最新推荐文章于 2025-02-11 08:37:35 发布

原创

最新推荐文章于 2025-02-11 08:37:35 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在Vue项目中通过Babel插件transform-remove-console实现console.log在开发模式下保留，在生产模式下移除。同时提供了两种配置方法，一种全局移除，另一种按环境区分。

1. 安装babel-plugin-transform-remove-console插件

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

2. 在babel.config.js配置文件中加入配置

module.exports = {
   
   
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [ // 加入以下内容，引入插件。
    'transform-remove-console'
  ]

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

beeworkshop

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue2 - 项目上线后生产环境中去除console.log的输出以及断点的解决方案

前端充电宝

06-27

1513

当你准备将Vue.js应用程序部署到生产环境时，一个关键的优化步骤是移除代码中的所有语句以及断点。在开发阶段，是一个非常有用的调试工具，但在生产环境中保留它们可能会影响性能和安全性。在本文中，我将向你展示如何通过使用Vue CLI 2来自动化这一过程，确保你的应用在发布时不再包含任何。通过上述步骤，你可以轻松地在部署 Vue.js 应用程序到生产环境之前，自动化地移除所有语句。这不仅可以提高应用的性能，还可以减少潜在的安全风险。记得在开发过程中保留可以帮助你更轻松地调试代码，但在最终部署前要记得清理它们。

vue-cli3项目配置webpack自动删除生产环境的console.log调试信息

weixin_39547000的博客

09-29

561

我们都知道，项目在编译打包上生产环境的时候是不能有console.log()信息打印输出的，但是我们在开发环境有时候调试代码又需要打印输出一些信息，我们也不可能在编译上线的时候把代码里面的console.log()一个一个的全部删除掉，这个时候就需要我们在配置文件里面配置一下，生产环境编译的时候自动去掉console.log()。 vue-cli2的时候是在build文件下面的webpack.prod.conf.js中配置的，vue-cli3文件结构有所不同，是在项目目录下的vue.config.js文件里

参与评论您还未登录，请先登录后发表或查看评论

将Vue2中的console.log调试信息移除

01-30

835

介绍怎么使用 'babel-plugin-transform-remove-console' 移除前端项目中所有的console.log

在vue中使用console.log无效的解决

11-20

webpack开发环境下，在vue中使用console.log无效，一直以为webpack出了问题。使用window.console.log()就能够顺利在浏览器控制台输出了。以及在axios请求的回调中依旧无法输出使用window.console.log()/console.log(),先留坑吧。补充知识：vue中 :style 与 :class 三元运算符使用 style三元表达式 {{m.txt}} class三元表达式 <i cla

vue2 打包去除console

reembarkation的博客

04-24

1208

vue2 打包去除console

vue2去除控制台console

前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！

01-05

856

vue2去除控制台console。

vue2去掉console打包

believet93的博客

05-16

2795

修改build文件夹中webpack.prod.conf.js的内容如下： new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false drop_debugger: true drop_console: true ...

vue3 清除生产 console.log

weixin_71574589的博客

07-18

442

【代码】vue3 清除生产 console.log。

Vue Cli3 打包配置并自动忽略console.log语句的方法

10-15

本篇文章将详细介绍如何在 Vue CLI 3 中配置打包过程以自动忽略 `console.log` 语句。首先，为了实现这一目标，我们需要引入一个名为 `uglifyjs-webpack-plugin` 的插件，它允许我们在压缩代码时删除 `console.log...

【vue】将Vue2中的console.log()调试信息移除

fruge365的博客

02-16

1049

将Vue2中的console.log()调试信息移除 | 如何将控制台log移除

【vue2】项目发布阶段，去除 console.log()

阿程的博客

07-04

567

项目发布阶段，去除 console.log()

vue 打包的时候去掉console.log vue2 webpack

qq_43429002的博客

05-16

596

vue2 在 webpack.prod.conf.js 中添加 // 代码： plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': env }), new UglifyJsPlugin({ uglifyOptions:

vue2项目生产环境移除console.log

最新发布

qq_48795482的博客

02-11

936

场景：在实际的开发中，我们经常使用console.log在控制台中进行调试，但是调试完了之后，经常忘记了清除。项目开发久了，打开控制台发现一大堆console.log打印结果，其中不乏一些隐私信息，如登录密码等。面对开发时大量的console.log,我们该如何清除呢，一个一个的删掉？webpack提供了一个配置，可在项目打包时自动移除console.log。3、在configureWebpack中加入配置。2、在vue.config.js文件中引入。

vue项目在生产环境去掉console.log()

weixin_45283339的博客

01-21

1435

1、安装依赖 npm i -S babel-plugin-transform-remove-console 2、配置在babel.config.js文件中添加代码代码如下： const proPlugins = []; // 如果是生产环境，则使用去掉console的插件 if (process.env.NODE_ENV === 'production') { proPlugins.push('transform-remove-console'); } module.exports = {

vue项目打包去掉console.log

weixin_44740072的博客

09-25

1074

vue项目打包时去掉console.log

Vue 2.x CLI4.x vue.config打包去除console

u013470619的博客

03-18

1023

安装插件uglifyjs-webpack-plugin npm i uglifyjs-webpack-plugin --save-d // vue.config.js const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { runtimeCompiler: true, publicPath: './', // 自动打开浏览器 devServer: { open: true, hot:

五, Vueのvue-cli2和vue-cli3生产环境去掉console.log

Steampy专栏

03-16

3046

在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。如果手动删除未免也太累了，再说以后想再开发还得重新写console。webpack提供了删除console的插件，这里分两种： vue-cli2 生成环境去除console.log 1. 项目build 下面webpack.prod.config.js 文件中: plugins: [ ...

vue项目中webpack使用（uglifyjs-webpack-plugin）打包时候去掉console.log与debugger调试

weixin_44979432的博客

06-25

3544

一、配置路径 vue-cli2 在 build 文件下面的webpack.prod.conf.js中配置 vue-cli3 在项目目录下的vue.config.js文件里面配置二、安装插件依赖依赖: uglifyjs-webpack-plugin. yarn add -D uglifyjs-webpack-plugin 或 npm install uglifyjs-webpack-plugin 三、在 vue.config.js 文件中进行配置在文件头部引入 //打包配置自动忽略

vue 移除console.log

09-15

要在Vue项目中移除console.log语句，你可以使用babel-plugin-transform-remove-console插件来实现。首先，你需要安装该插件，可以运行以下命令： ``` npm install babel-plugin-transform-remove-console --save-dev...