目前负责的公众号又迭代了一个版本,之前打生产包,配置总是和测试包搞混,所以使用了vue-cli3.0的环境变量来控制配置。

但是又发现了一个新问题,写代码的过程中写了很多console.log 来调试代码,但是生产包里显示这些调试信息又有些不合适,所以想在打生产包的时候去除代码中的console.log.

网络上一顿搜索之后,使用了uglifyjs-webpack-plugin来进行压缩优化,但是遇到了Unexpected token: name ***的报错,又是一番查询之后,有说这个插件不支持es6之后的语法,但是vue-cli3.0使用的是babel-preset-env,默认的配置就包含了babel-preset-es2015。又有说问题出在Swiper4插件,说退回Swipwe3就能解决问题,但是现在Swiper4插件用到的一些API,Swiper3根本就没有,改起来太麻烦了。

最后搜索发现vue-cli3.0在打包过程中就使用了terser-webpack-plugin插件进行优化,具体配置可以node_modules/@vue/cli-service/lib/config/prod.js中看到。

if (process.env.VUE_CLI_TEST) {
webpackConfig.optimization.minimize(false)
} else {
const TerserPlugin = require('terser-webpack-plugin')
const terserOptions = require('./terserOptions')
webpackConfig.optimization.minimizer([
new TerserPlugin(terserOptions(options))
])
}

这里使用了环境变量进行控制,只有打生产包的时候才会调用这个插件进行打包优化。

terser-webpack-plugin的具体配置在同一个文件夹下terserOptions.js中,只要在这个文件中compress对象加入

warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']

这几个属性就可以了。

vue-cli3.0 生产包去除console.log的更多相关文章

  1. @vue/cli3中解决Elint中console.log报错的问题

    方法一:package.json中”eslintConfig”>"rules”字段添加如下代码 "no-console": "off", &qu ...

  2. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  3. 解决vue/cli3.0 语法验证规则 ESLint: Expected indentation of 2 spaces but found 4. (indent)

    当你使用vue/cli3.0的时,有可能出现雁阵规则 ESLint: Expected indentation of 2 spaces but found 4. (indent) 解决方法 1.在vu ...

  4. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  5. vue cli3.0打包

    1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...

  6. 去除console.log()打印语句

    打印语句:console.log() ,一句话描述它! “用的时候感觉贼爽,不用的时候脑袋痛吧?” 以下提供三种解决方案: 一. webpack打包时去除,适合Vue项目 二. vscode正则匹配, ...

  7. 使用VUE CLI3.0搭建项目vue2+scss+element简易版

    1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...

  8. vue cli3.0配制axios代理

    今天学习时,想访问网易新闻接口,结果显而易见,因为跨域被浏览器拒绝了. 去网上找一下结果一开始找到的是2.x版本的配置,生硬的放进去,给我各种报错.编译阶段就炸了.浪费好多时间 再按3.0版本去搜索才 ...

  9. vue cli3.0 封装组件全局引入js文件并发布到npm

    首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...

随机推荐

  1. 洛谷P4884 多少个1?(BSGS)

    传送门 模数好大……__int128好麻烦……而且BSGS第一次写有点写蒙了…… $11...1(N个1)\equiv k(mod m)$很难算,那么考虑转化一下 先把$11...1(N个1)$写成$ ...

  2. 理解Bitcode:一种中间代码

    原文网址: http://www.cocoachina.com/ios/20150818/13078.html 今天试着用Xcode 7 beta 3在真机(iOS 8.3)上运行一下我们的工程,结果 ...

  3. PL/SQL基础知识

    Oracle之PL/SQL学习笔记 自己在学习Oracle是做的笔记及实验代码记录,内容挺全的,也挺详细,发篇博文分享给需要的朋友,共有1w多字的学习笔记吧.是以前做的,一直在压箱底,今天拿出来整理了 ...

  4. 了解cookie

    1.cookie数据会自动在Web浏览器和Web服务器之间传输的,因此服务端脚本就可以读,写存储在客户端的cookie值. 2.在javascript中使用cookie不会采用任何加密机制,因此是不安 ...

  5. java利用myeclipse自带三大框架搭建三大框架(Hibernate+Struts2+Spring)过程详解

    搭建过程因人而异,我的搭建过程大致是这样的: 1.创建一个javaweb项目: 2.导入Spring框架,上图: 2.1: 2.2: 2.3: 3.导入struts2框架,上图: 3.1: 3.2: ...

  6. C# 委托之把委托从委托链(多播委托)移除

    运用“-”运算符将委托从委托链移除 class HelloWorld { //定义委托类型 delegate void DelegationChain(); static void Main(stri ...

  7. laravel-admin 配置富文本编辑器流程

    laravel-admin默认去除富文本编辑器的,官方也给出了配置方法. 我配置的是wangEditor,本来配置完后就能愉快得使用了,可万万没想到还是有坑的.默认是用base64上传的,也就是数据库 ...

  8. Java环境安装与Eclipse安装

    1.jdk下载安装 2.Eclipse下载安装 遇到的问题: 出现问题原因可能有两个:1)没有配置环境变量 2)jdk和eclipse安装的版本不一致,都是64位或者都是32位. 本人出现错误的原因: ...

  9. 解决Git在更新项目时报凭证错误(Authentication failed)

    报此错误,大概率原因是用户名和密码弄错了,我用的阿里云,在网上找了半天发现Git远程仓库用的用户名和密码不是阿里云登陆用的账户密码,必须另外设置: 链接:code.aliyun.com/profile ...

  10. deepin15.2无线网无法使用

    原文链接:https://bbs.deepin.org/forum.php?mod=viewthread&tid=40276&highlight=%E6%97%A0%E7%BA%BF% ...