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)目依賴(lài)
{
"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中圖片加載不出來(lái)的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue-star評(píng)星組件開(kāi)發(fā)實(shí)例
下面小編就為大家分享一篇vue-star評(píng)星組件開(kāi)發(fā)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue.js 實(shí)現(xiàn)輸入框動(dòng)態(tài)添加功能
這篇文章主要介紹了vue.js 實(shí)現(xiàn)輸入框動(dòng)態(tài)添加功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
vue使用Print.js打印頁(yè)面樣式不出現(xiàn)的解決
這篇文章主要介紹了vue使用Print.js打印頁(yè)面樣式不出現(xiàn)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue的移動(dòng)端多圖上傳插件vue-easy-uploader的示例代碼
這篇文章主要介紹了Vue的移動(dòng)端多圖上傳插件vue-easy-uploader的示例代碼,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue中使用better-scroll實(shí)現(xiàn)輪播圖組件
better-scroll 是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場(chǎng)景需求的插件。這篇文章主要介紹了Vue中使用better-scroll實(shí)現(xiàn)輪播圖組件的實(shí)例代碼,需要的朋友可以參考下2020-03-03
專(zhuān)業(yè)級(jí)Vue?多級(jí)菜單設(shè)計(jì)
這篇文章主要為大家介紹了專(zhuān)業(yè)級(jí)的Vue?多級(jí)菜單設(shè)計(jì)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue中引用JSON數(shù)據(jù)的方法小結(jié)
在現(xiàn)代Web開(kāi)發(fā)中,JSON是一種輕量級(jí)的數(shù)據(jù)交換格式,易于人閱讀和編寫(xiě),同時(shí)也易于機(jī)器解析和生成,Vue.js作為一個(gè)流行的前端框架,支持多種方式引入和處理JSON數(shù)據(jù),本文將詳細(xì)介紹幾種在Vue中引用JSON數(shù)據(jù)的方法,需要的朋友可以參考下2024-10-10
vue中的非父子間的通訊問(wèn)題簡(jiǎn)單的實(shí)例代碼
這篇文章主要介紹了vue中的非父子間的通訊問(wèn)題簡(jiǎn)單的實(shí)例代碼,需要的朋友可以參考下2017-07-07
Vue3實(shí)現(xiàn)計(jì)算屬性的代碼詳解
計(jì)算屬性對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)算是經(jīng)常使用的一個(gè)能力了,本文將從代碼層面來(lái)給大家介紹下Vue3是如何實(shí)現(xiàn)計(jì)算屬性的,需要的朋友可以參考下2023-07-07