vue-cli2,vue-cli3,vite 生产环境去掉console.log

console.log一般都是在开发环境下使用的,在生产环境下需要去除 ,如果手动删除未免也太累了,我们可以用插件对于具体环境全局处理。

vue-cli2

项目build 下面webpack.prod.config.js 文件中:

复制代码
plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          //drop_console  传递true以放弃对控制台的调用。*功能
          drop_console: true,
          // pure_funces 禁用console.log函数
          pure_funcs: ['console.log']
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
     
    ......
]
vue-cli3

vue.config.js 里配置.

复制代码
configureWebpack: config => {
    //生产环境取消 console.log
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  },

如果生产环境的文件中NODE_ENV 自定义,不是production,上述代码或报错,会显示找不到minimizer, 所以生产环境的NODE_ENV 尽量设置为production

生产环境NODE_ENV 自定义或者为production,都可以用下面的代码

复制代码
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
configureWebpack: config => {
    //生产环境取消 console.log
    if (process.env.NODE_ENV === 'prod') {
        optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            // warnings: false,
                            drop_console: true, //注释console
                            drop_debugger: true,
                            pure_funcs: ['console.log'] //移除console
                        }
                    }
                })
            ]
        }
    }
  },
vite

1.build.minify为terser时(terser需要npm单独安装):

复制代码
npm add -D terser

vite.config.ts 里配置.

复制代码
import { defineConfig } from 'vite'
export default defineConfig( { 
...
    build : {
        minify : 'terser' ,
        terserOptions : {
            compress : {
                drop_console : true ,
                drop_debugger : true ,
            } ,
        } , 
    } ,
...
} )
  1. build.minify默认为esbuild时:

    复制代码
     build : {
         esbuild: {
             drop: mode === 'production' ? ['console', 'debugger'] : []
         },
     }
相关推荐
小蒜学长16 小时前
基于SpringBoot+Vue的健身房管理系统的设计与实现(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端
晓得迷路了17 小时前
栗子前端技术周刊第 97 期 - Viteland:8 月回顾、Redux Toolkit 2.9、Nuxt 4.1...
前端·javascript·nuxt.js
前端双越老师17 小时前
前端开发 AI Agent 智能体,需要掌握哪些知识?
前端·node.js·agent
EndingCoder17 小时前
Electron 安全性最佳实践:防范常见漏洞
前端·javascript·electron·前端框架·node.js·桌面端
学前端搞口饭吃17 小时前
React props的使用
前端·javascript·react.js
灵感__idea17 小时前
JavaScript高级程序设计(第5版):前端的能力边界
前端·javascript·程序员
华洛17 小时前
SEO还没死,GEO之战已经开始
前端·javascript·产品
IT_陈寒17 小时前
Python性能优化:5个被低估的魔法方法让你的代码提速50%
前端·人工智能·后端
As331001017 小时前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
不想上班只想要钱17 小时前
vue3 ts:声明的一个数组不能将类型“boolean”分配给类型“never”。
前端·vue.js