前端(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封装使用的完整教程
这篇文章主要给大家介绍了关于vue中axios封装使用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
Vue实现点击当前行变色
这篇文章主要为大家详细介绍了Vue实现点击当前行变色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
项目中Axios二次封装实例Demo
vue项目经常会用到axios来请求数据,那么首先肯定需要对这个请求方法进行一个二次封装,这篇文章主要给大家介绍了关于项目中Axios二次封装的相关资料,需要的朋友可以参考下
2021-06-06
vue.js前端网页弹框异步行为示例分析
这篇文章主要为大家介绍了vue.js前端网页弹框异步的行为示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助祝大家多多进步，早日升职加薪
2021-11-11
vue echarts实现横向柱状图
这篇文章主要为大家详细介绍了vue echarts实现横向柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
Vue使用element-ui实现菜单导航
这篇文章主要为大家详细介绍了Vue使用element-ui实现菜单导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
使用vue-cli3新建一个项目并写好基本配置(推荐)
这篇文章主要介绍了使用vue-cli3新建一个项目并写好基本配置的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-04-04
vue+element实现下拉菜单并带本地搜索功能示例详解
这篇文章主要介绍了vue+element实现下拉菜单并带本地搜索功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-09-09
在vue中实现嵌套页面(iframe)
这篇文章主要介绍了在vue中实现嵌套页面(iframe)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
如何在Vue项目中使用axios请求
这篇文章主要介绍了如何在Vue项目中使用axios请求，对Vue感兴趣的同学，可以参考下
2021-05-05