vue項(xiàng)目在打包時(shí),如何去掉所有的console.log輸出
vue打包去掉所有的console.log輸出
安裝插件
npm install babel-plugin-transform-remove-console --save-dev
添加配置
安裝babel-plugin-transform-remove-console開發(fā)依賴，然后在項(xiàng)目的babel.config.js的plugin中添加節(jié)點(diǎn)。再build就不會(huì)有console警告了。
如下配置無論在開發(fā)環(huán)境還是生產(chǎn)環(huán)境都會(huì)去掉所有的console輸出語句。
但是babel.config.js文件是全局共享的，無論是開發(fā)階段還是生產(chǎn)階段，都會(huì)移除所有的console，我們想在開發(fā)階段保留console該怎么做呢？
如下：
代碼：
// 項(xiàng)目在發(fā)布時(shí)需要用到的babel插件數(shù)組
const proPlugins = [];
// 如果當(dāng)前是生產(chǎn)環(huán)境，則使用去掉console的插件
if (process.env.NODE_ENV === 'production') {
proPlugins.push('transform-remove-console');
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins:[
...proPlugins
]
}
vue npm run build 打包去掉console和警告
在本地開發(fā)環(huán)境中肯定都會(huì)去打印一些數(shù)據(jù)，但是你如果上傳到正式環(huán)境呢這些肯定不能再有了，但是你也不能一行一行的去注釋掉吧，這樣很麻煩所以vue在配置的時(shí)候其實(shí)是有這個(gè)配置的但是需要你自己去配置文件里面修改一下，這樣才能方便你的開發(fā)二可以達(dá)到偷懶的地步。下面就說一下這個(gè)配置吧
其實(shí)就兩行代碼就可以了
在build下面的webpack.prod.conf.js里面找到這里添加上
drop_console: true, pure_funcs: [‘console.log']
這兩句就可以完美解決了。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了antd Form組件表單在vue3中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue-router配合ElementUI實(shí)現(xiàn)導(dǎo)航的實(shí)例
下面小編就為大家分享一篇vue-router配合ElementUI實(shí)現(xiàn)導(dǎo)航的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue使用assign巧妙重置data數(shù)據(jù)方式
這篇文章主要介紹了vue使用assign巧妙重置data數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue3?watchEffect的使用教程和相關(guān)概念
Vue?3?引入了?Composition?API,其中?watchEffect?是一個(gè)非常強(qiáng)大的工具,用于響應(yīng)式地追蹤依賴項(xiàng)的變化,本文將詳細(xì)介紹?watchEffect?的使用方法和相關(guān)概念,文中有詳細(xì)的代碼供大家參考,需要的朋友可以參考下2024-08-08
利用vue和element-ui設(shè)置表格內(nèi)容分頁的實(shí)例
下面小編就為大家分享一篇利用vue和element-ui設(shè)置表格內(nèi)容分頁的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue 前端導(dǎo)出后端返回的excel文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
Vue 中 toRefs() 和 toRef() 的使用方法
在 Vue 3 中,toRefs()可以將響應(yīng)式對(duì)象的屬性轉(zhuǎn)換為可響應(yīng)的 refs,主要用于在解構(gòu)響應(yīng)式對(duì)象時(shí),保持屬性的響應(yīng)性,這篇文章主要介紹了Vue 中 toRefs() 和 toRef() 的使用,需要的朋友可以參考下2025-01-01
Vue?3?使用moment設(shè)置顯示時(shí)間格式的問題及解決方法
在Vue?3中,因?yàn)檫^濾器(filter)已經(jīng)被廢棄,取而代之的是全局方法(global?method),本文給大家介紹Vue?3?使用moment設(shè)置顯示時(shí)間格式的問題及解決方法,感興趣的朋友一起看看吧2023-12-12
這篇文章主要為大家詳細(xì)介紹了基于vue2實(shí)現(xiàn)左滑刪除功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11