Vue-cli3如何在生产包去除警告信息和console

前言

---

在开发项目过程当中，常常会须要用到console来打印检查问题，项目上线前一个个注释掉也会有遗漏的，并不这样建议；还有在使用UI框架时，UI框架不少时候会给出不少警告信息，提醒您采用更优的方法，这就致使项目上线以后整个控制台异常很是乱，一大堆报错和打印信息，解决方案以下：

terser-webpack-plugin插件在脚手架中的应用简介

---

vue-cli3采用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的具体配置写在与prod.Js同路径的terserOptions.js文件中

须要新增的配置！！！

---

特别注意

* 新增配置的文件：terserOptions.js
* 添加到该文件的compress对象中，新增代码以下
复制代码

warnings: false,
      drop_console: true,
      drop_debugger: true,
      pure_funcs: ['console.log'],
      pure_funcs: ['console.warn'],
复制代码

总结

---

新增配置，从新打包以后，启动项目后，在控制台内就看不到烦人的console和warnings信息了。

传送门(推荐阅读)

---

• npm官网---terser-webpack-plugin说明
• github----terser-webpack-plugin说明
• markdown语法说明