Vue build過程取消console debugger控制臺信息輸出方法詳解
一、前言
Vue
項(xiàng)目開發(fā)過程中,會經(jīng)常需要使用console.log
、console.info
、alert
等測試語句來輸出內(nèi)容,而在生產(chǎn)環(huán)境之中,我們不希望控制臺同樣輸出以上信息,特別是用戶信息相關(guān)。
組包前,逐一去刪除、注釋顯然費(fèi)時費(fèi)力,好在Vue
提供了通過配置文件修改配置變量,實(shí)現(xiàn)在開發(fā)環(huán)境打印,而生產(chǎn)環(huán)境不打印控制臺信息的方法。
二、配置文件修改
修改build/webpack.prod.conf.js
配置文件,找到UglifyJsPlugin
配置,在compress
中添加如下代碼即可。
new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, // 打包的時候移除console、debugger drop_debugger: true, // 移除debugger drop_console: true, // 移除console pure_funcs: ['console.log','console.info'] } }, sourceMap: config.build.productionSourceMap, parallel: true }),
更優(yōu)的配置方式如下:
new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, // 打包的時候移除console、debugger drop_debugger: process.env.NODE_ENV=== 'production', // 移除debugger drop_console: process.env.NODE_ENV=== 'production', // 移除console warnings: process.env.NODE_ENV=== 'production', // 移除告警信息 pure_funcs: ['console.log','console.info'] } }, sourceMap: config.build.productionSourceMap, parallel: true }),
其中,process.env.NODE_ENV
定義在prod.env.js
文件中,
module.exports = { NODE_ENV: "production" }
prod.env.js
文件在config/index.js
的build.env
配置中引入。
build: { env: require('./prod.env') }
以上就是Vue build過程取消console debugger控制臺信息輸出方法詳解的詳細(xì)內(nèi)容,更多關(guān)于Vue build過程取消的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
一個Vue視頻媒體多段裁剪組件的實(shí)現(xiàn)示例
這篇文章主要介紹了一個Vue媒體多段裁剪組件的實(shí)現(xiàn)示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08vue3中setup語法糖下父子組件間傳遞數(shù)據(jù)的方式
Vue3中父組件指的是包含一個或多個子組件的組件,它們通過props和事件等方式來傳遞數(shù)據(jù)和通信,這篇文章主要介紹了vue3中setup語法糖下父子組件間傳遞數(shù)據(jù)的方式,需要的朋友可以參考下2023-06-06sortable+element 實(shí)現(xiàn)表格行拖拽的方法示例
這篇文章主要介紹了sortable+element 實(shí)現(xiàn)表格行拖拽的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-06-06element-plus 在vue3 中不生效的原因解決方法(element-plus引入)
這篇文章主要介紹了element-plus 在vue3 中不生效的原因解決方法(element-plus引入),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式
這篇文章主要介紹了vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09