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 ,
            } ,
        } , 
    } ,
...
} )

2. build.minify默认为esbuild时:

    build : {
        esbuild: {
            drop: mode === 'production' ? ['console', 'debugger'] : []
        },
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/599312.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32G0存储器和总线架构

文章目录 前言一、系统架构二、存储器构成三、存储器地址映射四、存储器边界地址五、外设寄存器边界地址 前言 此文章是STM32G0 MCU的学习记录,并非权威,请谨慎参考。 STM32G0主流微控制器基于工作频率可达64 MHz的高性能Arm Cortex-M0 32位RISC内核。该…

GEE数据集——DeltaDTM 全球沿海数字地形模型数据集

DeltaDTM 全球沿海数字地形模型产品 简介 DeltaDTM 是全球沿岸数字地形模型(DTM),水平空间分辨率为 1 弧秒(∼30 米),垂直平均绝对误差(MAE)为 0.45 米。它利用 ICESat-2 和 GEDI …

内容安全(IPS入侵检测)

入侵检测系统( IDS )---- 网络摄像头,侧重于风险管理,存在于滞后性,只能够进行风险发现,不能及时制止。而且早期的IDS误报率较高。优点则是可以多点进行部署,比较灵活,在网络中可以进…

【java9】java9新特性之改进JavaDocs

Java9在JavaDocs方面的主要新特性是,其输出现在符合兼容HTML5标准。在之前的版本中,默认的HTML版本是 HTML4.01,但在Java9及之后的版本中,JavaDocs命令行工具将默认使用HTML5作为输出标记语言。这意味着,使用JavaDocs工…

Markdown 精简教程(胎教级教程)

文章目录 一、关于 Markdown1. 什么是 Markdown?2. 为什么要用 Markdown?3. 怎么用 Markdown?(编辑软件) 二、标题1. 常用标题写法2. 可选标题写法3. 自定义标题 ID4. 注意事项 三、段落四、换行五、字体选项1. 粗体2.…

跨境电商行业分析-商品出海的四大路径

1. 跨境电子商务模式和国内电子商务模式【区别】 最大的不同点有3个: 达成交易的双方是属于不同【关境】的交易主体商品通过众多电子商务平台/独立站等,进行支付结算通过国际物流的方式(海运/铁路/空运/卡车)进行报关、清关、派…

anconda创建虚拟环境,使用虚拟环境(基于win平台)

假设已经安装了anconda,打开anaconda的 shell。 查看已存在的虚拟环境,base是默认的,不用理会,后面的yolov5就是用户创建的 #查看有那些虚拟环境 (base) PS C:\Users\x> conda info -e # conda environments: # base …

如何判断代理IP质量?

由于各种原因(从匿名性和安全性到绕过地理限制),代理 IP 的使用变得越来越普遍。然而,并非所有代理 IP 都是一样的,区分高质量和低质量的代理 IP 对于确保流畅、安全的浏览体验至关重要。以下是评估代理 IP 质量时需要…

计划订单转采购申请的增强点和可以增强的内容

MD15 MD14 计划订单转采购申请,涉及的增强点和增强内容 对于外协的采购申请,有时候需要对组件的内容做一些特殊的处理,但是处理组件清单的增强ME_COMPONENTS_UPDATE的增强点(这个增强点对于手工创建的外协PR、外协PO,外协pr转外协…

Day21 代码随想录打卡|字符串篇---右旋转字符串

题目(卡码网 T55): 字符串的右旋转操作是把字符串尾部的若干个字符转移到字符串的前面。给定一个字符串 s 和一个正整数 k,请编写一个函数,将字符串中的后面 k 个字符移到字符串的前面,实现字符串的右旋转…

Pycharm无法链接服务器环境(host is unresponsived)

困扰了很久的一个问题,一开始是在服务器ubuntu20.04上安装pycharm community,直接运行服务器上的pycharm community就识别不了anaconda中的环境 后来改用pycharm professional也无法远程连接上服务器的环境,识别不了服务器上的环境&#xff…

[力扣题解]102.二叉树的层序遍历

题目&#xff1a;102. 二叉树的层序遍历 代码 迭代法 class Solution { public:vector<vector<int>> levelOrder(TreeNode* root) {queue<TreeNode*> que;TreeNode* cur;int i, size;vector<vector<int>> result;if(root ! NULL){que.push(ro…

Pycharm导入自定义模块报红

文章目录 Pycharm导入自定义模块报红1.问题描述2.解决办法 Pycharm导入自定义模块报红 1.问题描述 Pycharm 导入自定义模块报红&#xff0c;出现红色下划线。 2.解决办法 打开【File】->【Setting】->【Build,Execution,Deployment】->【Console】->【Python Con…

【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!

本篇将重点讲解vue中的多种组件通信方式&#xff0c;包括【父传子】【子传父】【兄弟组件通信】【依赖注入】等等&#xff0c;并提供具体案例来让小伙伴们加深理解、彻底掌握&#xff01;喜欢的小伙伴们点赞收藏&#xff0c;持续关注哦~&#x1f495; &#x1f49f; 上一篇文章…

【前端】HTML基础(2)

文章目录 前言一、HTML常见标签1、 注释标签1.1 标题标签1.2 段落标签1.3 换行标签 2、 格式化标签2.1 加粗标签2.2 倾斜标签2.3 删除线标签2.4 下划线标签 3、 图片标签3.1 src属性3.2 alt属性3.3 title属性3.4 图片大小3.5 图片边框 4、 超链接标签4.1 属性4.2 属性 前言 这篇…

爆赞好文之java反序列化之CB超详细易懂分析

java反序列化之CB超详细易懂分析 CB1环境搭建前言分析PropertyUtilsBeanComparatorPriorityQueue CB2环境搭建前言exp CB1 环境搭建 pom.xml <dependencies><dependency><groupId>commons-beanutils</groupId><artifactId>commons-beanutils&l…

QT:信号和槽

文章目录 信号和槽connect函数槽自定义槽第一种第二种 信号和槽 这里的信号和Linux的信号一样吗&#xff1f; 答案是差不多&#xff0c;但是也有一定的区别&#xff0c;而且也是两个不同的概念 信号有三个概念&#xff0c;一个是信号源&#xff0c;这个信号是由谁发送的&…

kafka学习笔记(三、生产者Producer使用及配置参数)

1.简介 1.1.producer介绍 生产者就是负责向kafka发送消息的应用程序。消息在通过send()方法发往broker的过程中&#xff0c;有可能需要经过拦截器(Interceptor)、序列化器(Serializer)和分区器(Partitioner)的一系列作用后才能被真正的发往broker。 demo: public class Kafk…

Ecovadis认证是什么?

Ecovadis认证是一种企业社会责任&#xff08;CSR&#xff09;评估和评级的认证&#xff0c;旨在衡量企业在环境、劳工和人权、道德以及可持续采购四个方面的可持续发展表现。该认证已成为全球范围内许多公司和组织的评估标准之一&#xff0c;有助于提高企业的会声誉和可持续发展…

LeetCode:滑动窗口最大值

文章收录于LeetCode专栏 LeetCode地址 滑动窗口最大值 题目 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。   返回 滑动窗口中的最大值 。   示例 1…
最新文章