Vue移除Console.log()

最新推荐文章于 2024-04-29 14:23:19 发布
最新推荐文章于 2024-04-29 14:23:19 发布
阅读量780 收藏 1
点赞数
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a624971020/article/details/111463340
版权

移除Console.log()
一. 安装对应依赖
两种方法：分别针对于终端和可视化窗口，
第一种方式为：打开终端-输入npm i babel-plugin-transform-remove-console --save --dev
第二种方法为：打开可视化窗口-依赖面板-安装依赖-选择开发依赖-搜索babel-plugin-transform-remove-console插件
二. 原理分析
在babel文件添加transform-remove-console字段，取除console.log输出，通过添加if函数
以实现发布项目阶段的作用生效
三. 操作原理
(1) 首先进入项目打开babel.config.js，将 transform-remove-console粘贴到plugins数组当中
在这里插入图片描述

(2) 但这种移除方法会将项目开发阶段和发布阶段的打印输出方式全部移除，显然这是不合理的，所以应当将其修改为发布阶段的移除模式，首先需要在babel.config.js当中定义一个空数组prodPlugins用于接收transform-remove-console字段，接下来，判断process.env.NODE_ENV的值，如果值为production证明项目属于发布阶段，那么将transform-remove-console字段加入到prodPlugins当中，并将prodPlugins数组以…prodPlugins的形式保存到plugins数组当中，同时删除之前加入的transform-remove-console
在这里插入图片描述

甄泽森
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue -- 项目打包移除console.log和debugger
King Saj
02-09 1890
【vue深入】项目打包之后，移除console.log和debugger console.log和 debugger 随着项目开发完成，步入稳步运行的阶段，就是部署到生产环境。这个时候，我们就不需要再进行调试什么的了，那么我们需要移除掉console.log和debugger uglifyjs-webpack-plugin npm install uglifyjs-webpack-plugin --save-dev 或 yarn add uglifyjs-webpack-plugin -D 在项目根目录
vue3 清除生产 console.log
最新发布
weixin_71574589的博客
07-18 154
【代码】vue3 清除生产 console.log。
vue打包后去除代码中的console.log输出
qq_40410916的博客
07-30 931
vue打包后去除代码中的console.log输出 项目上线的时候都不需要看到一些debug输出的内容，所以要去除console.log 在vue 2中webpack中在生产环境的插件中添加配置 // 代码： plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': env
vue3项目去掉console.log
范天缘的博客
07-29 1337
vue3去掉console
vue-cli3配置去掉console.log
菜鸟的博客
03-11 3591
在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。 webpack提供了删除console的插件，在vue-cli3里面是这样用的： 首先安装terser-webpack-plugin cnpm install terser-webpack-plugin -D vue.config.js中的配置 const TerserPlugin ...
vue3 生产环境去掉console.log
kola的博客
04-17 2262
在开发项目时,为了便于调试,我们一般会输出很多console.log,但是在生产环境中我们是要去掉这些的. 但是如果手动删除,就有点麻烦了,而且如果以后再开发调试的时候,还得重写再写console.log 不过好在webpack提供了删除console.log的插件,在vue3里面是这样用的: 首先安装terser-webpack-plugin npm install terser-webpa...
vue cil3 去除console
weixin_38401146的博客
06-15 178
1、安装插件babel-plugin-transform-remove-console npm install babel-plugin-transform-remove-console --save-dev # or yarn add babel-plugin-transform-remove-console --dev 2、在【babel.config.js】配置如下 if(process.env.NODE_ENV === 'production') { plugins.push(.
Vue项目优化 —— 移除console
zyf971020的博客
10-09 1363
Vue项目优化 —— 移除console
Vue Cli3 打包配置并自动忽略console.log语句的方法
10-15
这样，即使不引入 `uglifyjs-webpack-plugin`，在生产环境下，`console.log` 语句也会被自动移除。 总结起来，Vue CLI 3 提供了多种方式来忽略生产环境中的 `console.log` 语句，包括使用 `uglifyjs-webpack-plugin...
vue 移除console.log
09-15
要在Vue项目中移除console.log语句，你可以使用babel-plugin-transform-remove-console插件来实现。首先，你需要安装该插件，可以运行以下命令： ``` npm install babel-plugin-transform-remove-console --save-dev...
vue或react项目生产环境去掉console.log的操作
11-19
总结来说，通过正确配置Webpack的`terser-webpack-plugin`，可以在生产环境中自动移除console语句，提高应用性能。同时，理解Vue的响应式原理和最佳实践，可以有效避免数据更新后视图未更新的问题，保证应用的正常...
Vue3+Vite打包，隐藏、去除console（不安装terser）
qq_39892965的博客
03-14 2923
这都2024年了，vite已经默认使用esbuild，而esbuild是明显快于terser的，我们不能为了这一个点，又回到80年代吧。官方都默认使用了esbuild，所以我们不能为了隐藏console，舍弃打包速度（龟速打包，想必各位开发同学都被折磨过，当然不能忍。使用Vue3+Vite构建生产包时，发现部署的生产包中，仍然有console代码，导致控制台输出了调试内容，生产环境中当然很不友好。强迫症驱使，不使用网上现（cou）成（he）的做法，就得付出代价——自己花时间摸索。
vue 去掉console
jkpazhang的博客
04-29 422
生产环境的配置 vue inspect --mode production > output.js。vue inspect 是Vue CLI提供的一个命令，用于检查当前项目的webpack配置。开发环境的配置 vue inspect > output.js。可以通过这个命令看配置是否成功。output.js查找。
Vue项目打包配置生产环境去掉console.log语句的方法
我的博客
04-09 1439
使用webpack内置的 terser 工具，在vue.config.js文件加上相应的配置即可。同样是使用 terser 工具，不过vite没有内置terser，需要手动安装依赖。安装完后在vite.config.js文件加上相应的配置即可。
去除vue项目中的console
qq_45669178的博客
09-15 401
注：取消vue项目打包之后的 console.log() 在控制台的打印。 一、下载 npm install babel-plugin-transform-remove-console 二、在根路径下，创建babel.config.js const plugins = ['@vue/babel-plugin-transform-vue-jsx'] // 生产环境移除console if (process.env.NODE_ENV === 'production') { //在这判断 是否为 生产环境
vue3项目打包后关闭console.log
weixin_51958960的博客
08-13 1345
1、安装 rollup-plugin-terser。2、打开 vite.config.ts 文件。
vue打包去除console
universe的博客
06-30 2907
我们用vue框架写代码时，有时候会用console去调试（基于开发习惯），当一个项目开发完毕，需要发布时，会有各种log信息出现在控制台，这些信息并不想在生产环境被某些用户看到，当然可以一条条删掉…(已经删了3个小时) ，这时我们可以在vue依赖包加入这段代码： 目录下 my-app-vue（项目名称）\node_modules@vue\cli-service\lib\config\terserOptions.js 我们需要在 module.exports = options =>({ terser
Vue项目中去掉所有的console语句
qq_45791799的博客
10-10 548
Vue项目中去掉所有的console语句
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值