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

目前负责的公众号又迭代了一个版本，之前打生产包，配置总是和测试包搞混，所以使用了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']

这几个属性就可以了。

转载于:https://www.cnblogs.com/KlllB/p/10682262.html

vue-cli3.0 生产包去除console.log相关推荐

Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题参考文章: (1)01-路由跳转安装less this.$router.re ...
可视化构建工具探索之Vue Cli3.0 阿里飞冰
Vue Cli3.0可视化构建工具--Vue UI 一.安装环境安装了最新的Vue CLI.打开Terminal,输入: npm install -g @vue/cli or yarn global ...
vue cli3.0打包上线不同环境
vue cli3.0打包上线不同环境 1. cli3.0支持".env"文件配置,在项目的根目录下配置".env"文件,根据不同的环境命名不同的文件名称,如: ...
vue cli3.0 引入eslint 结合vscode使用
ESLint 它的目标是提供一个插件化的javascript代码检测工具. 官网地址最近一个项目里,最开始使用cli3.0搭建的时候没有默认选用eslint,导致现在有的人使用其他编辑器,就会出现格 ...
微信小程序去除console.log()
wx.getSystemInfo({success: (result) => {console.log(result);if (result.platform!=="devtools& ...
vue cli3.0创项目报错‘This may cause things to work incorrectly. Make sure to use the same version for b’
错误: throw new Error(^Error:Vue packages version mismatch:- vue@2.6.12 (C:\Users\Administrator\AppDat ...
vue cli3.0 修改配置文件
问题:资源找不到新版的vue-cli构建出来的项目目录没有build和config文件夹,需要改输入路径的地址,需要在项目的根目录添加一个Vue.config.js. 修改资源目录 module. ...
Vue cli3.0创建Vue项目
创建Vue项目在要创建项目的文件夹下面打开Powershell窗口输入命令 vue create 项目名称选择第二项回车后选择是否使用历史路由 no 回车选择 Less 回车选择第三个 ...

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

vue-cli3.0 生产包去除console.log相关推荐

最新文章

热门文章