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

前端_yu小白2025-02-13 21:13

场景：在实际的开发中，我们经常使用console.log在控制台中进行调试，但是调试完了之后，经常忘记了清除。项目开发久了，打开控制台发现一大堆console.log打印结果，其中不乏一些隐私信息，如登录密码等。如果部署上线，不仅增加了代码打包体积 ，而且很有可能将用户或系统的私密信息泄露。面对开发时大量的console.log,我们该如何清除呢，一个一个的删掉？有没有更好的办法？

解决方案：

webpack提供了一个配置，可在项目打包时自动移除console.log。

具体操作步骤：

1、安装terser-webpack-plugin插件

2、在vue.config.js文件中引入

3、在configureWebpack中加入配置。

javascript 复制代码

module.exports = {
  
     ....其他配置
  configureWebpack: {
    ...其他配置
    optimization: {
      minimize:true,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 移除所有 console
            },
          },
        }),
      ],
    },
  },
  
}