vue項目打包怎么清除console.log

這篇文章主要介紹“vue項目打包怎么清除console.log”，在日常操作中，相信很多人在vue項目打包怎么清除console.log問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue項目打包怎么清除console.log”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

第1種：

uglifyjs-webpack-plugin插件，配置在vue.config.js中，不支持es6，已歸檔，不再維護，不推薦，vue-cli3,4可行，vue-cli5中未生效。（我項目中未生效，不附代碼，可自行搜索嘗試）

第2種：

terser-webpack-plugin插件，配置在vue.config.js中，vue-cli5自帶，vue-cli3,4需要下載插件，vue-cli3,4可行，vue-cli5中已無默認對應配置屬性’drop_console’，自己添加后依舊未生效。（我項目中未生效，不附代碼，可自行搜索嘗試）

第3種：

babel-plugin-transform-remove-console插件，配置在babel.config.js中，vue-cli5實測可行，vue-cli3,4也可行。（嘗試后，谷歌瀏覽器控制臺僅websocket的打印輸出未清除，其他打印輸出都是清除干凈了的）

下載依賴

npm install babel-plugin-transform-remove-console -D
or
yarn add babel-plugin-transform-remove-console -D

babel.config.js中

const proPlugins = [];
// 判斷環境
if (process.env.NODE_ENV === 'production') {
  proPlugins.push('transform-remove-console');
}
module.exports = {
  plugins: [...proPlugins],
};

第4種：

不用插件，main.js中判斷生產環境后window.console.log = function (){};即可，vue-cli5實測可行，vue-cli3,4也可行。（嘗試出來的效果是清除得最干凈的，但不清楚這種侵入式覆蓋的寫法有啥弊端沒有）

main.js中

// 正式環境清除所有console.log
if (process.env.NODE_ENV === 'production') {
  if (window) {
    window.console.log = function () {};
  }
}

到此，關于“vue項目打包怎么清除console.log”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！