Vue.js：部署时自动过滤console.log语句

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

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

1 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

8 篇文章

订阅专栏

背景

在开发阶段的时候我们会经常在前端项目里面使用console.log来输出、调试代码，当要将这个项目部署到服务器时，首先我们不想把这些信息暴露给用户，其次这些console.log函数会一定程度上影响代码的执行效率。所以我们在打包发布部署时，需要将这些console.log语句给屏蔽掉。

实现

//1、引入插件（该插件在vue-cli3的时候就已经集成了，我们不需要自己执行npm去install）
const TerserPlugin = require('terser-webpack-plugin')
//2、配置到configureWebpack中（vue.config.js文件）
configureWebpack: (config) => {
  let optimization = {
    minimizer: [
      new TerserPlugin({
       terserOptions: {
         ecma: undefined,
         warnings: false,
         parse: {},
         compress: {
           drop_console: true,
           drop_debugger: false,
           pure_funcs: ['console.log'] // 移除console
         }
       },
     })
    ]
  }
}