vue項目打包清除console.log的4種方法
記錄一下項目中碰到的小問題，打包清除console.log的方法，vue2，vue-cli5.0.0（得注意一下自己項目的vue-cli版本）
第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 = [];
// 判斷環(huán)境
if (process.env.NODE_ENV === 'production') {
proPlugins.push('transform-remove-console');
}
module.exports = {
plugins: [...proPlugins],
};
第4種：
不用插件，main.js中判斷生產環(huán)境后window.console.log = function (){};即可，vue-cli5實測可行，vue-cli3,4也可行。（嘗試出來的效果是清除得最干凈的，但不清楚這種侵入式覆蓋的寫法有啥弊端沒有）
main.js中
// 正式環(huán)境清除所有console.log
if (process.env.NODE_ENV === 'production') {
if (window) {
window.console.log = function () {};
}
}到此這篇關于vue項目打包清除console.log的4種方法的文章就介紹到這了,更多相關vue打包清除console.log內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
element ui table（表格）實現點擊一行展開功能
這篇文章主要給大家介紹了關于element ui table（表格）實現點擊一行展開功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要介紹了vue router+vuex實現首頁登錄判斷邏輯，用于判斷是否登錄首頁，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue實現錨點跳轉之scrollIntoView()方法詳解
這篇文章主要介紹了vue實現錨點跳轉之scrollIntoView()方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了vite項目引入quasar的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-08-08
前端實現簡單的sse封裝方式(React hook Vue3)
這篇文章主要介紹了前端實現簡單的sse封裝方式(React hook Vue3),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
解決vue2+vue-router動態(tài)路由添加及路由刷新后消失問題
這篇文章主要介紹了解決vue2+vue-router動態(tài)路由添加及路由刷新后消失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
本文主要介紹一下Vue SPA 路由跳轉無法回到頂部問題排查與解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-06-06
在Vue Element的table組件中插入超鏈接,可以使用<el-link>標簽替代傳統(tǒng)的<a>標簽,實現更加整潔的UI設計,具體操作是替換原有的<span>標簽,直接使用<el-link>進行超鏈接的插入,使得鏈接樣式與Element UI保持一致2024-09-09
今天小編就為大家分享一篇vue element table 表格請求后臺排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3中Proxy在組件封裝中的妙用：讓組件交互更優(yōu)雅,通過Proxy,父組件可以直接訪問內部子組件的方法和屬性,簡化了使用方式,提高了開發(fā)效率2025-10-10