Vue Cli3 打包配置并自动忽略console.log语句的方法


Posted in Javascript onApril 23, 2020

下载插件

npm i -D uglifyjs-webpack-plugin

在 vue.config.js 引入使用

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
 configureWebpack: {
  plugins: [
   new UglifyJsPlugin({
    uglifyOptions: {
     compress: {
      drop_console: true,
     },
    },
   }),
  ],
 },
 devServer: {
  proxy: {
   '/xxx': {
    target: 'http://192.168.150.17:8080/',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
     '^/xxx': 'xxx',
    },
   },
  },
 },
 publicPath: './',
}

这时执行 npm run build 打包后的文件就没有 console.log 语句了。

不过这时会有一个问题,就是在开发环境的时候编译会非常慢。例如修改了一个变量的值,我的电脑要编译 10 秒才能重新刷出来页面,一直卡在 92% chunk asset optimization

由于去掉 console.log 语句这个功能只有在打包时才需要,所以我们可以加一个判断,只在生产环境时才把上述配置代码加上。

所以正确的配置如下:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const config = {
 devServer: {
  proxy: {
   '/xxx': {
    target: 'http://192.168.150.17:8080/',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
     '^/xxx': 'xxx',
    },
   },
  },
 },
 publicPath: './',
}

if (process.env.NODE_ENV === 'production') {
 config.configureWebpack = {
  plugins: [
   new UglifyJsPlugin({
    uglifyOptions: {
     compress: {
      drop_console: true,
     },
    },
   }),
  ],
 }
}

module.exports = config

vue-cli3.0 生产包去除console.log

不安装插件去除console.log的方法

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

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

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

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

到此这篇关于Vue Cli3 打包配置并自动忽略console.log语句的方法的文章就介绍到这了,更多相关Vue Cli3打包并忽略console.log内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue项目打包之开发环境和部署环境的实现
Apr 23 #Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 #Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 #Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 #Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 #Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 #Javascript
微信小程序实现手指拖动选项排序
Apr 22 #Javascript
You might like
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Python 的类、继承和多态详解
2017/07/16 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
python 6行代码制作月历生成器
2020/09/18 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
少先队活动总结
2014/08/29 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
计划生育工作汇报
2014/10/28 职场文书
先进员工事迹材料
2014/12/20 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2015学校年度工作总结
2015/05/11 职场文书