vue-cli4项目初始配置及优化(改用terser去除console)

2023-11-05

在使用配置完成的初始化仓库编写项目时发现了一些问题。排查之后发现uglifyjs-webpack-plugin不兼容es6,所以改用terser去除console
其实在项目中搜索terser,你会发现在package-lock.json文件中@vue/cli-service的依赖中已经引入了terser-webpack-plugin并配置了。如图:
在这里插入图片描述
在编译启动时打印配置config.optimization.minimizer,如图
在这里插入图片描述
那么我们只要在这个基础上进行修改即可,代码如下:

const resolve = dir => path.join(__dirname, dir)
module.exports = {
  configureWebpack: (config) => {
  if (process.env.NODE_ENV === 'production') {
	config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
    }
  }
}

本地启动如图:
在这里插入图片描述
可以看到我打印了一个hello
打包部署后如图:
在这里插入图片描述
console.log已经去除
仓库地址:vue初始模板

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue-cli4项目初始配置及优化(改用terser去除console) 的相关文章

随机推荐

  • chunk 15 [mini-css-extract-plugin],加载顺序错误导致的警告

    项目运行时 mini css extract plugin 警告 注意看这两个文件 在项目中找到引用的位置 交换一下顺序 重新运行即可
  • 一个阿里巴巴码农的六年回眸

    原文地址 http kb cnblogs com page 160480 本文由淘宝开放平台技术产品负责人 放翁 文初撰写 它讲述了一个个冷冰冰产品背后的活生生的人了 也在讲述着一个码农的六年心路历程 技术耐得住寂寞 低谷积累高峰冲刺 主动
  • 前端需要注意和了解的SEO

    SEO的基本了解 1 什么是SEO SEO Search Engine Optimization又叫做搜索引擎优化 是一种方式 利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名 2 前端怎么理解SEO 对于SEO引擎 在前端需要的是做出
  • 内核源码中版本号详解(KERNEL_VERSION & KERNEL_VERSION)

    1 内核源码中版本的定义 VERSION 2 主版本号 PATCHLEVEL 6 主版本号 SUBLEVEL 35 更次的版本号 EXTRAVERSION 7 更更次的版本号 NAME Yokohama 1 内核的版本信息定义在内核源码顶层
  • vscode 中,vue导入组件路径提示

    VsCode中 Vue导入组件路径提示 当用Vue组件开发时 经常会引入文件 但又没提示该如何解决 注意 编写vue项目时需要从根目录打开 否则会导致很多插件不能用 1 注意 设置之后的效果 打开VSCode 第一步 点击扩展 第二步 搜索
  • jenkins构建后自动上传svn备份jar包

    第一种 脚本方式 这种方式相当于我们把svn目录拉到本地 svn co命令 然后将jar包拷贝到目录中 然后上传到svn中 mkdir p tmp cd tmp rm rf svn co svn svn haha com release 0
  • 黑马程序员提供得教程

    这里写自定义目录标题 黑马程序员提供得教程 黑马程序员提供得教程 java全套教程 网盘链接 https pan baidu com s 1LxIxcHDO7SYB96SE GZfuQ 提取码 dor4 HTML JS 前端全套教程 网盘链
  • 计算机网络——数据包抓取与分析

    数据包抓取与分析 目录 一 实验目的 二 实验内容 三 实验环境 四 实验步骤与过程 一 实验目的 学习安装 使用协议分析软件 掌握基本的数据报捕获 过滤和协议的分析技巧 能对抓取数据包进行分析 二 实验内容 协议分析软件的安装和使用 学会
  • Vue中使用高德地图

    1 安装依赖 npm i amap amap jsapi loader save tips 如果node版本过高 请使用npm i amap amap jsapi loader save legacy peer deps 参考链接 http
  • XPath用法及常用函数

    目录 XPath简介 XPath语法 选取节点 谓语 Predicates 选取未知节点 选取若干路径 XPath 轴 XPATH的几个常用函数 XPath简介 XPath XML Path Language 是一门在 HTML XML 文
  • centos7 安装curl-7.51.0

    curl简介 curl是一个广泛使用的用来上传和下载的命令行工具 当然严格来讲 它还可以有别的用途 对于测试来讲 它是Web相关测试非常实用的工具 包括debugging 使用起来非常方便 而且另一方面 因为它是纯命令行的工具 所以也可以非
  • 【Pytorch-ACDC】复现U-Net for Cardiac Segmentation记录

    本文持续更新 算法概括 文献链接 U Net Convolutional Networks for Biomedical Image Segmentation 开源项目链接 U Net on ACDC dataset U Net结构示意 结
  • 查看C语言文件依赖关系(用-Wp,MD参数生成.d文件)

    1 wp MD参数介绍 1 在编译c源文件时使用该参数 会生成对应C源文件的 d格式的文件 d格式的文件内容是C源文件的依赖关系 2 C源文件的依赖关系就是源文件调用了哪些头文件 可以方便我们确认工程中的同名头文件到底是引用的哪一份 3 在
  • SPDK预备知识-DPDK

    DPDK本属于网络技术范畴 但是SPDK在DPDK基础上开发 到处都能看到它的影子 要想对SPDK有深入了解 就必须对DPDK有一定的认识 鉴于我们要讲的是SPDK 本文对DPDK中的网络部分不做解读 DPDK从2010年开源至今 生态系统
  • ubuntu上 apt-get update一直0%的问题

    今晚想在阿里云上装个tensorflow 结果要我更新 sudo apt get update 执行sudo apt get update后 一直都是0 一顿折腾 把ubuntu的 etc apt sources list d文件夹中的so
  • Ubuntu安装源配置文件"/etc/apt/sources.list"第X行有错误

    出现这个错误 是因为sources list文件中的获取源有问题 找到那个文件 打开文件 我们可以把里面的出现问题的行注释掉 也可以干脆把所有的源文件都换掉 下面提供一个163的源 如下 deb http mirrors 163 com u
  • redux-saga和redux-thunk的区别与使用场景?

    redux saga redux saga在store的index文件中创建saga中间件连接到store saga中间件可以监控派发action 如果有action type值与监控的变量一致 则执行该函数的内容 在这个函数中也可以再派发
  • QT的system函数实现在qt代码里面执行脚本语言

    函数原型 include
  • Windows下如何查看某个端口被谁占用

    1 打开命令窗口 以管理员身份运行 开始 gt 运行 gt cmd 或者是 window R 组合键 调出命令窗口 2 查找所有运行的端口 输入命令 netstat ano 该命令列出所有端口的使用情况 在列表中我们观察被占用的端口 比如是
  • vue-cli4项目初始配置及优化(改用terser去除console)

    在使用配置完成的初始化仓库编写项目时发现了一些问题 排查之后发现uglifyjs webpack plugin不兼容es6 所以改用terser去除console 其实在项目中搜索terser 你会发现在package lock json文