vue或react項(xiàng)目生產(chǎn)環(huán)境去掉console.log的操作
在開(kāi)發(fā)環(huán)境寫(xiě)了很多console.log/info/debug,在生產(chǎn)環(huán)境需要去掉這些console。
如果手動(dòng)刪除未免也太累了，再說(shuō)以后想再開(kāi)發(fā)還得重新寫(xiě)console。
事實(shí)上webpack提供了刪除console的插件，在vue-cli3里面是這樣用的：
首先安裝terser-webpack-plugin
npm install terser-webpack-plugin -D
然后在vue.config.js文件里寫(xiě)插件的配置：
module.exports = {
configureWebpack: (config)=>{
if(process.env.NODE_ENV === 'production'){
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
}
}
}
2020.1.14補(bǔ)充：
上面的寫(xiě)法是直接修改webpack的配置，vue官方文檔里說(shuō)也可以返回一個(gè)將會(huì)被合并的對(duì)象，寫(xiě)法如下：
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
configureWebpack: (config)=>{
if(process.env.NODE_ENV === 'production'){
// 返回一個(gè)將會(huì)被合并的對(duì)象
return {
optimization:{
minimizer: [
new TerserPlugin({
sourceMap:false,
terserOptions:{
compress:{
drop_console : true
}
}
})
]
}
}
}
}
}
2020.4.22補(bǔ)充：
最近在做react項(xiàng)目的時(shí)候發(fā)現(xiàn)它的webpack的配置，也可以使用terser去掉console.log。
webpack.config.prod.js:
module.exports = {
optimization:{
minimizer: [
new TerserPlugin({
sourceMap:false,
terserOptions:{
compress:{
drop_console : true
}
}
})
]
}
}
補(bǔ)充知識(shí)：vue中遇到數(shù)據(jù)更新但是頁(yè)面沒(méi)有更新的情況
今天在項(xiàng)目中遇到了一個(gè)需求，點(diǎn)擊改變數(shù)據(jù)，之后在頁(yè)面上立即看到更改后的數(shù)據(jù)。
首先，如上圖的黃色按鈕是通過(guò)v-for 循環(huán)產(chǎn)生的，data()里只有數(shù)據(jù)cards:[ … ]，cards的值是通過(guò)調(diào)用后臺(tái)接口拿到的。
data(){
return {
cards:[]
}
}
<div v-for="card in cards" :key="card.id"> <img src="xxx" /> <div v-if="card.isShow" @click="cacelHandler(card)"> <img src="xxxx" /> </div> </div>
這個(gè)頭像下方的黃色按鈕，是根據(jù)card.isShow的truthy 決定顯示或不顯示。
當(dāng)我點(diǎn)擊按鈕的時(shí)候，把card.isShow 的值變?yōu)?false。
可是頁(yè)面上的黃色按鈕還在，并沒(méi)有如我期望的那樣消失。
通過(guò)查詢資料得知，使用this.$forceUpdate()可以重新渲染組件，這樣就可以得到想要的效果。
cacelHandler(card){
card.isShow = false;
this.$forceUpdate();
}
vue官方對(duì)$forceUpdate的解釋是：
$forceUpdate可以迫使 Vue 實(shí)例重新渲染。它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
以上這篇vue或react項(xiàng)目生產(chǎn)環(huán)境去掉console.log的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇vue刷新和tab切換實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了Vue打印錯(cuò)誤日志問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue使用jsMind思維導(dǎo)圖的實(shí)戰(zhàn)指南
jsMind是一個(gè)顯示/編輯思維導(dǎo)圖的純javascript類(lèi)庫(kù),其基于 html5的canvas進(jìn)行設(shè)計(jì),這篇文章主要給大家介紹了關(guān)于vue使用jsMind思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue3如何使用provide實(shí)現(xiàn)狀態(tài)管理詳解
Vue3中有一對(duì)新增的api，provide和inject,熟悉Vue2的朋友應(yīng)該明,這篇文章主要給大家介紹了關(guān)于vue3如何使用provide實(shí)現(xiàn)狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2021-10-10
Vue的路由動(dòng)態(tài)重定向和導(dǎo)航守衛(wèi)實(shí)例
下面小編就為大家分享一篇Vue的路由動(dòng)態(tài)重定向和導(dǎo)航守衛(wèi)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue列表循環(huán)從指定下標(biāo)開(kāi)始的多種解決方案
這篇文章主要介紹了Vue列表循環(huán)從指定下標(biāo)開(kāi)始的多種方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
關(guān)于vue2響應(yīng)式缺陷的問(wèn)題
這篇文章主要介紹了關(guān)于vue2響應(yīng)式缺陷的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
基于vue3與supabase系統(tǒng)認(rèn)證機(jī)制詳解
這篇文章主要介紹了基于vue3與supabase系統(tǒng)認(rèn)證機(jī)制,,系統(tǒng)使用基于 JWT (JSON Web Token) 的認(rèn)證方式,提供了安全可靠的用戶身份管理機(jī)制,需要的朋友可以參考下2025-04-04
element input輸入框自動(dòng)獲取焦點(diǎn)的實(shí)現(xiàn)
本文主要介紹了element input輸入框自動(dòng)獲取焦點(diǎn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
el-date-picker時(shí)間清空值為null處理方案
本文介紹關(guān)于Vue.js項(xiàng)目中時(shí)間選擇器組件的問(wèn)題,當(dāng)選擇后清空導(dǎo)致值變?yōu)閚ull,進(jìn)而引發(fā)后臺(tái)接口報(bào)錯(cuò),通過(guò)監(jiān)聽(tīng)`overallForm.time`的值并設(shè)置為空數(shù)組,成功解決此問(wèn)題,確保了數(shù)據(jù)正確性,同時(shí),建議避免直接監(jiān)聽(tīng)整個(gè)對(duì)象以優(yōu)化性能,感興趣的朋友一起看看吧2024-08-08