Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置
更新時(shí)間：2023年06月13日 11:14:35 作者：天問(wèn)
這篇文章主要為大家介紹了Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
vue-cli 3.0使用
使用 vue-cli 3.0 (@vue/cli) 腳手架構(gòu)建的項(xiàng)目，一般在本地開(kāi)發(fā)過(guò)程中，會(huì)有不少 console 調(diào)試信息。如果不處理這些日志信息，默認(rèn)情況下，即使是構(gòu)建生產(chǎn)環(huán)境的包，這些 console 打印也不會(huì)被移除，這顯然是不夠嚴(yán)謹(jǐn)?shù)?。所以就介紹一下怎么來(lái)配置根據(jù)環(huán)境刪除 console 日志。
vue remove console
一、項(xiàng)目依賴
{
"dependencies": {
"axios": "^0.18.1",
"echarts": "^5.3.3",
"element-ui": "^2.15.9",
"v-clipboard": "^2.2.3",
"vue": "^2.7.10",
"vue-router": "^3.6.5",
"vuex": "^3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.12.1",
"@vue/cli-plugin-eslint": "^3.12.1",
"@vue/cli-service": "^3.12.1",
"compression-webpack-plugin": "^3.0.0",
"html-webpack-externals-plugin": "^3.8.0",
"less": "^3.13.1",
"less-loader": "^4.1.0",
"msw": "^0.47.3",
"msw-tools": "latest",
"babel-plugin-transform-remove-console": "^6.9.4",
"vue-template-compiler": "^2.7.10",
"webpack-bundle-analyzer": "^4.7.0"
}
}二、配置
- 下載
babel-plugin-transform-remove-console包
npm i -D babel-plugin-transform-remove-console
- 配置
babel.config.js
const plugins = []
if (process.env.NODE_ENV === 'production') {
plugins.push('transform-remove-console')
}
module.exports = {
presets: ['@vue/app'],
plugins: [...plugins],
}- 完成，
npm run build打包體驗(yàn)。
以上就是Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置的詳細(xì)內(nèi)容，更多關(guān)于Vue 打包刪除生產(chǎn)環(huán)境的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue實(shí)現(xiàn)點(diǎn)擊按鈕input保持聚焦?fàn)顟B(tài)的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊按鈕input保持聚焦?fàn)顟B(tài),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-06-06
這篇文章主要為大家介紹了VUE2中的MVVM模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue通過(guò)input篩選數(shù)據(jù)的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue項(xiàng)目的表單校驗(yàn)實(shí)戰(zhàn)指南
這篇文章主要介紹了Vue項(xiàng)目表單校驗(yàn)的相關(guān)資料,前端表單校驗(yàn)?zāi)軠p少無(wú)效請(qǐng)求,保護(hù)后端接口,使用ElementPlus表單組件進(jìn)行校驗(yàn),需要準(zhǔn)備表單對(duì)象、規(guī)則對(duì)象并進(jìn)行雙向綁定,用戶名、密碼以及協(xié)議勾選等字段都需符合特定規(guī)則,需要的朋友可以參考下2024-10-10
VUE中computed 、created 、mounted的先后順序說(shuō)明
這篇文章主要介紹了VUE中computed 、created 、mounted的先后順序說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue3封裝Element導(dǎo)航菜單的實(shí)例代碼
這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實(shí)例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細(xì)代碼,本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Vue使用axios(Ajax)+ElementUI實(shí)現(xiàn)登錄實(shí)踐
本文介紹了如何使用Vue和ElementUI框架創(chuàng)建一個(gè)登錄頁(yè)面,并實(shí)現(xiàn)前后端交互,同時(shí),還討論了跨域問(wèn)題的解決方案以及ES6中的箭頭函數(shù)2026-03-03
vue 監(jiān)聽(tīng)屏幕高度的實(shí)例
今天小編就為大家分享一篇vue 監(jiān)聽(tīng)屏幕高度的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Vue中的父子組件傳值.sync,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12