前端(VUE)打包上线去除console.log解决方案

更新时间：2025年02月27日 10:28:17 作者：lnbcj

这篇文章主要介绍了如何在前端项目中使用terser-webpack-plugin插件来删除代码中的console.log语句,以避免在正式环境中输出调试信息,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

前端项目打包上线时经常遇到一个问题，写代码时的console.log忘记删除带到了正式环境，对于正式项目肯定是不友好的。可以直接使用插件“terser-webpack-plugin”来解决

引入

npm install terser-webpack-plugin --save-dev

配置

使用webpack构建的项目

在你的 webpack.config.js 中，配置 terser-webpack-plugin：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 其他配置项...
  optimization: {
    minimize: true, // 必须开启，否则配置不失效
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

使用vue-cli构建的项目

在你的 vue.config.js 中，配置 terser-webpack-plugin：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 其他配置项...
configureWebpack: config => {
    // 去除打包后的console.log
    let optimization = {
      minimize: true, // 必须开启，否则配置不失效
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true,
            },
          },
        }),
      ],
    };
    Object.assign(config, {
      optimization,
    });
  },
};

总结

到此这篇关于前端(VUE)打包上线去除console.log解决方案的文章就介绍到这了,更多相关VUE打包上线去除console.log内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue axios请求成功却进入catch的原因分析
这篇文章主要介绍了vue axios请求成功却进入catch的原因分析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue3使用Echarts导致tooltip失效问题及解决方法
Vue3 使用 proxy 对象代理,而 echarts 则使用了大量的全等（===）, 对比失败从而导致了bug,这篇文章主要介绍了Vue3使用Echarts导致tooltip失效问题及解决方法,需要的朋友可以参考下
2023-08-08
10分钟了解Vue3递归组件的用法
递归简单来讲就是程序自己调用自身,vue中的递归组件就是,组件自身调用自身,下面这篇文章主要给大家介绍了关于Vue3递归组件的用法,需要的朋友可以参考下
2022-03-03
Vue项目打包部署总结篇
这篇文章主要介绍了Vue项目打包部署总结篇,关于Vue项目发布的相关问题就先总结这么多,几乎在每一步都踩过坑才有所体会,有问题欢迎各位同学一起探讨,需要的朋友可以参考下
2024-08-08
详解Vue 全局变量，局部变量
这篇文章主要介绍了Vue全局变量局部变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
在Vue 3中使用OpenLayers加载GPX数据并显示图形效果
本文介绍了如何在Vue 3中使用OpenLayers加载GPX格式的数据并在地图上显示图形,通过使用OpenLayers的GPX解析器,我们能够轻松地处理和展示来自GPS设备的地理数据,需要的朋友可以参考下
2024-12-12
vue实现鼠标悬浮框效果
这篇文章主要为大家详细介绍了vue实现鼠标悬浮框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue数据驱动模拟实现4
这篇文章主要介绍了Vue数据驱动模拟实现的相关资料，介绍了Array的变异方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
vue.js全局组件和局部组件示例代码
组件是Vue.js的最核心的功能,所谓的组件化就是把页面拆分成多个组件,每个组件单独使用CSS,JS,模板,图片等资源进行开发与维护,然后在制作网页的时候根据需要调用相关的组件,这篇文章主要给大家介绍了关于vue.js全局组件和局部组件的相关资料,需要的朋友可以参考下
2022-12-12
Vuex,iView UI面包屑导航使用扩展详解
今天小编就为大家分享一篇Vuex,iView UI面包屑导航使用扩展详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11