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語法說明