vue項(xiàng)目打包清除console.log的4種方法
記錄一下項(xiàng)目中碰到的小問(wèn)題,打包清除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中已無(wú)默認(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也可行。(嘗試出來(lái)的效果是清除得最干凈的,但不清楚這種侵入式覆蓋的寫法有啥弊端沒(méi)有)
main.js中
// 正式環(huán)境清除所有console.log if (process.env.NODE_ENV === 'production') { if (window) { window.console.log = function () {}; } }
到此這篇關(guān)于vue項(xiàng)目打包清除console.log的4種方法的文章就介紹到這了,更多相關(guān)vue打包清除console.log內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖
本文主要介紹了vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06vue路由跳轉(zhuǎn)打開(kāi)新窗口(window.open())和關(guān)閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉(zhuǎn)打開(kāi)新窗口(window.open())和關(guān)閉窗口(window.close())問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue動(dòng)態(tài)生成新表單并且添加驗(yàn)證校驗(yàn)規(guī)則方式
這篇文章主要介紹了vue動(dòng)態(tài)生成新表單并且添加驗(yàn)證校驗(yàn)規(guī)則方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue.js 實(shí)現(xiàn)v-model與{{}}指令方法
這篇文章主要介紹了vue.js 實(shí)現(xiàn)v-model與{{}}指令方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10vue實(shí)現(xiàn)前端拖拽div位置交換的方法詳解
這篇文章主要介紹了如何使用Vue技術(shù)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的備忘錄應(yīng)用,包括添加條目和拖拽條目?jī)蓚€(gè)功能,文章還詳細(xì)解釋了如何使用Vue的draggable屬性和JavaScript獲取同級(jí)元素節(jié)點(diǎn)的方法,需要的朋友可以參考下2025-01-01在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見(jiàn)方法匯總
在 Vue 3 項(xiàng)目開(kāi)發(fā)中,為了方便管理和引用文件路徑,設(shè)置 @ 指向根目錄是一項(xiàng)常見(jiàn)的需求,下面給大家分享在Vue3中設(shè)置 `@` 指向根目錄的方法匯總,感興趣的朋友一起看看吧2024-06-06vue父組件數(shù)據(jù)更新子組件相關(guān)內(nèi)容未改變問(wèn)題(用watch解決)
這篇文章主要介紹了vue父組件數(shù)據(jù)更新子組件相關(guān)內(nèi)容未改變問(wèn)題(用watch解決),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03Vue3結(jié)合TypeScript項(xiàng)目開(kāi)發(fā)實(shí)踐總結(jié)
本文主要介紹了Vue3結(jié)合TypeScript項(xiàng)目開(kāi)發(fā)實(shí)踐總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09