Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置
更新時間：2023年06月13日 11:14:35 作者：天問
這篇文章主要為大家介紹了Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
vue-cli 3.0使用
使用 vue-cli 3.0 (@vue/cli) 腳手架構(gòu)建的項目，一般在本地開發(fā)過程中，會有不少 console 調(diào)試信息。如果不處理這些日志信息，默認(rèn)情況下，即使是構(gòu)建生產(chǎn)環(huán)境的包，這些 console 打印也不會被移除，這顯然是不夠嚴(yán)謹(jǐn)?shù)?。所以就介紹一下怎么來配置根據(jù)環(huán)境刪除 console 日志。
vue remove console
一、項目依賴
{
"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打包體驗。
以上就是Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置的詳細(xì)內(nèi)容，更多關(guān)于Vue 打包刪除生產(chǎn)環(huán)境的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue中圖片加載不出來的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
下面小編就為大家分享一篇vue-star評星組件開發(fā)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue.js 實現(xiàn)輸入框動態(tài)添加功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
vue使用Print.js打印頁面樣式不出現(xiàn)的解決
這篇文章主要介紹了vue使用Print.js打印頁面樣式不出現(xiàn)的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue的移動端多圖上傳插件vue-easy-uploader的示例代碼
這篇文章主要介紹了Vue的移動端多圖上傳插件vue-easy-uploader的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Vue中使用better-scroll實現(xiàn)輪播圖組件
better-scroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。這篇文章主要介紹了Vue中使用better-scroll實現(xiàn)輪播圖組件的實例代碼,需要的朋友可以參考下2020-03-03
這篇文章主要為大家介紹了專業(yè)級的Vue?多級菜單設(shè)計實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue中引用JSON數(shù)據(jù)的方法小結(jié)
在現(xiàn)代Web開發(fā)中,JSON是一種輕量級的數(shù)據(jù)交換格式,易于人閱讀和編寫,同時也易于機器解析和生成,Vue.js作為一個流行的前端框架,支持多種方式引入和處理JSON數(shù)據(jù),本文將詳細(xì)介紹幾種在Vue中引用JSON數(shù)據(jù)的方法,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue中的非父子間的通訊問題簡單的實例代碼,需要的朋友可以參考下2017-07-07
計算屬性對于前端開發(fā)來說算是經(jīng)常使用的一個能力了,本文將從代碼層面來給大家介紹下Vue3是如何實現(xiàn)計算屬性的,需要的朋友可以參考下2023-07-07