Vue生產(chǎn)環(huán)境如何自動屏蔽console
更新時間：2024年06月06日 15:09:56 作者：北長風(fēng)
這篇文章主要介紹了Vue生產(chǎn)環(huán)境如何自動屏蔽console問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue生產(chǎn)環(huán)境自動屏蔽console
背景
在開發(fā)中打的log可能會忘記刪除導(dǎo)致發(fā)上生產(chǎn)版本后有l(wèi)og打出
為了保證生產(chǎn)環(huán)境不受這種影響
所以在生產(chǎn)環(huán)境時自動屏蔽console;
原理
在項目初始化的時候判斷環(huán)境,如果是生產(chǎn)環(huán)境則把console的指向替換;
實現(xiàn)
在main.js里插入以下代碼
// 屏蔽console
(function shieldConsole() {
if (process.env.NODE_ENV == "production") {
Reflect.ownKeys(console).map(key => {
if (typeof console[key] == "function") {
console[key] = () => {};
}
});
}
return;
})();- console是symbol類型所以需要用Object.getOwnPropertySymbols()、Reflect.ownKeys() 遍歷
- 注意使用Reflect.ownKeys()遍歷后會帶一個symbol內(nèi)置對象
- 把console的所有方法都改空函數(shù)就不會返回了
Vue打包后取消console
module.exports = {
chainWebpack(config) {
//delete console
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.compress.drop_console = true
return args
})
}
}vue.config.js中增加這段代碼
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用js-xlsx導(dǎo)出excel的實現(xiàn)方法
本文主要介紹了vue中使用js-xlsx導(dǎo)出excel的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
Vue3+Element?Plus使用svg加載iconfont的處理方法
這篇文章主要介紹了Vue3+Element?Plus使用svg加載iconfont的解決方案,本文詳細(xì)介紹了如何在Element?Plus中使用iconfont，簡單的說就是要將其封裝成SVG，并且支持動態(tài)修改顏色，需要的朋友可以參考下2022-08-08
vue?beforeDestroy?clearInterval清除定時器失效的解決
這篇文章主要介紹了vue?beforeDestroy?clearInterval清除定時器失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了解決vue項目本地啟動時無法攜帶cookie,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
這篇文章主要為大家詳細(xì)介紹了使用vue構(gòu)建一個上傳圖片表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue-cli項目中使用公用的提示彈層tips或加載loading組件實例詳解
這篇文章主要介紹了vue-cli項目中使用公用的提示彈層tips或加載loading組件,本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue函數(shù)式組件的應(yīng)用實例詳解，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
關(guān)于vue中如何監(jiān)聽數(shù)組變化
這篇文章主要介紹了關(guān)于vue中如何監(jiān)聽數(shù)組變化，對vue感興趣的同學(xué)，必須得參考下2021-04-04
Vue-cli assets SubDirectory及PublicPath區(qū)別詳解
這篇文章主要介紹了Vue-cli assets SubDirectory及PublicPath區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08