Vue生產(chǎn)環(huán)境如何自動(dòng)屏蔽console
更新時(shí)間：2024年06月06日 15:09:56 作者：北長(zhǎng)風(fēng)
這篇文章主要介紹了Vue生產(chǎn)環(huán)境如何自動(dòng)屏蔽console問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue生產(chǎn)環(huán)境自動(dòng)屏蔽console
背景
在開發(fā)中打的log可能會(huì)忘記刪除導(dǎo)致發(fā)上生產(chǎn)版本后有l(wèi)og打出
為了保證生產(chǎn)環(huán)境不受這種影響
所以在生產(chǎn)環(huán)境時(shí)自動(dòng)屏蔽console;
原理
在項(xiàng)目初始化的時(shí)候判斷環(huán)境,如果是生產(chǎn)環(huán)境則把console的指向替換;
實(shí)現(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()遍歷后會(huì)帶一個(gè)symbol內(nèi)置對(duì)象
- 把console的所有方法都改空函數(shù)就不會(huì)返回了
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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3?中使用?jsx?開發(fā)的詳細(xì)過(guò)程
這篇文章主要介紹了vue3?中使用?jsx?開發(fā),本文著重說(shuō)一下在使用 .vue 文件和 .jsx 文件在使用語(yǔ)法上的差異，需要的朋友可以參考下2022-09-09
vue中input type=file上傳后@change事件無(wú)效的解決方案
這篇文章主要介紹了vue中input type=file上傳后@change事件無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue2和Vue3的nextTick實(shí)現(xiàn)原理
Vue 中的數(shù)據(jù)綁定和模板渲染都是異步的，那么如何在更新完成后執(zhí)行回調(diào)函數(shù)呢？這就需要用到 Vue 的 nextTick 方法了，本文詳細(xì)介紹了Vue2和Vue3的nextTick實(shí)現(xiàn)原理，感興趣的同學(xué)可以參考一下2023-04-04
Vue.config.productionTip = false 不起作用的問(wèn)題及解決
本文主要介紹了Vue.config.productionTip = false 不起作用的問(wèn)題及解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-08-08
文章介紹了前端通過(guò)將后端返回的文件流轉(zhuǎn)化為blob對(duì)象,并使用FileReader實(shí)現(xiàn)文件下載的完整方式,文章詳細(xì)描述了前端Vue代碼和后端Spring Boot代碼,指出了后端使用不同變量下載文件時(shí)文件格式和名稱的問(wèn)題2025-12-12
vue項(xiàng)目部署到Apache服務(wù)器中遇到的問(wèn)題解決
這篇文章主要介紹了vue項(xiàng)目部署到Apache中遇到的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Emit是Vue3中另一種常見的組件間傳值方式,它通過(guò)在子組件中觸發(fā)事件并將數(shù)據(jù)通過(guò)事件參數(shù)傳遞給父組件來(lái)實(shí)現(xiàn)數(shù)據(jù)傳遞,本文就來(lái)介紹一下Vue3 emit傳值,感興趣的可以了解一下2023-12-12
Vue3中內(nèi)置組件Teleport的基本使用與典型案例
Teleport是一種能夠?qū)⑽覀兊哪０逡苿?dòng)到DOM中Vue app之外的其他位置的技術(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中內(nèi)置組件Teleport的基本使用與典型案例的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue組件間數(shù)據(jù)傳遞的方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問(wèn)題及解決方法
這篇文章主要介紹了解決vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問(wèn)題,本文通過(guò)兩種方法給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10