vue項(xiàng)目打包清除console.log的四種方法總結(jié)
記錄一下項(xiàng)目中碰到的小問題，打包清除console.log的方法，vue2，vue-cli5.0.0（得注意一下自己項(xiàng)目的vue-cli版本）
第1種：
uglifyjs-webpack-plugin插件，配置在vue.config.js中，不支持es6，已歸檔，不再維護(hù)，不推薦，vue-cli3,4可行，vue-cli5中未生效。（我項(xiàng)目中未生效，不附代碼，可自行搜索嘗試）
第2種：
terser-webpack-plugin插件，配置在vue.config.js中，vue-cli5自帶，vue-cli3,4需要下載插件，vue-cli3,4可行，vue-cli5中已無默認(rèn)對(duì)應(yīng)配置屬性’drop_console’，自己添加后依舊未生效。（我項(xiàng)目中未生效，不附代碼，可自行搜索嘗試）
第3種：
babel-plugin-transform-remove-console插件，配置在babel.config.js中，vue-cli5實(shí)測(cè)可行，vue-cli3,4也可行。（嘗試后，谷歌瀏覽器控制臺(tái)僅websocket的打印輸出未清除，其他打印輸出都是清除干凈了的）
下載依賴
npm install babel-plugin-transform-remove-console -D or yarn add babel-plugin-transform-remove-console -D
babel.config.js中
const proPlugins = [];
// 判斷環(huán)境
if (process.env.NODE_ENV === 'production') {
proPlugins.push('transform-remove-console');
}
module.exports = {
plugins: [...proPlugins],
};
第4種：
不用插件，main.js中判斷生產(chǎn)環(huán)境后window.console.log = function (){};即可，vue-cli5實(shí)測(cè)可行，vue-cli3,4也可行。（嘗試出來的效果是清除得最干凈的，但不清楚這種侵入式覆蓋的寫法有啥弊端沒有）
main.js中
// 正式環(huán)境清除所有console.log
if (process.env.NODE_ENV === 'production') {
if (window) {
window.console.log = function () {};
}
}
總結(jié)
到此這篇關(guān)于vue項(xiàng)目打包清除console.log的四種方法總結(jié)的文章就介紹到這了,更多相關(guān)vue打包清除console.log內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue數(shù)據(jù)雙向綁定原理實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
解決ant Design Search無法輸入內(nèi)容的問題
這篇文章主要介紹了解決ant Design Search無法輸入內(nèi)容的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了利用Vue3指令實(shí)現(xiàn)水印背景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue iview實(shí)現(xiàn)動(dòng)態(tài)新增和刪除
這篇文章主要為大家詳細(xì)介紹了vue iview實(shí)現(xiàn)動(dòng)態(tài)新增和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
在Vue中實(shí)現(xiàn)二維碼生成與掃描功能的方法
二維碼是一種廣泛應(yīng)用于各種場(chǎng)合的編碼方式，它可以將信息編碼成一張二維圖案，方便快捷地傳遞信息，在Vue.js中，我們可以使用一些庫和組件來實(shí)現(xiàn)二維碼的生成和掃描，本文將介紹如何在Vue中實(shí)現(xiàn)二維碼的生成和掃描的方法2023-06-06
vue + elementUI實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法示例
這篇文章主要介紹了vue + elementUI實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
通過vue-cli來學(xué)習(xí)修改Webpack多環(huán)境配置和發(fā)布問題
這篇文章主要介紹了隨著Vue-cli來'學(xué)'并'改'Webpack之多環(huán)境配置和發(fā)布的相關(guān)知識(shí),本文將會(huì)根據(jù)一些實(shí)際的業(yè)務(wù)需求，先學(xué)習(xí)vue-cli生成的模版，然后在進(jìn)行相關(guān)修改，感興趣的朋友一起跟著小編學(xué)習(xí)吧2017-12-12
vue3.0?移動(dòng)端二次封裝van-uploader實(shí)現(xiàn)上傳圖片(vant組件庫)
這篇文章主要介紹了vue3.0?移動(dòng)端二次封裝van-uploader上傳圖片組件,此功能最多上傳6張圖片，并可以實(shí)現(xiàn)本地預(yù)覽，實(shí)現(xiàn)代碼簡單易懂，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue?雙向綁定問題$emit無效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09