Vue build過程取消console debugger控制臺(tái)信息輸出方法詳解
一、前言
Vue項(xiàng)目開發(fā)過程中，會(huì)經(jīng)常需要使用console.log、console.info、alert等測(cè)試語句來輸出內(nèi)容，而在生產(chǎn)環(huán)境之中，我們不希望控制臺(tái)同樣輸出以上信息，特別是用戶信息相關(guān)。
組包前，逐一去刪除、注釋顯然費(fèi)時(shí)費(fèi)力，好在Vue提供了通過配置文件修改配置變量，實(shí)現(xiàn)在開發(fā)環(huán)境打印，而生產(chǎn)環(huán)境不打印控制臺(tái)信息的方法。
二、配置文件修改
修改build/webpack.prod.conf.js配置文件，找到UglifyJsPlugin配置，在compress中添加如下代碼即可。
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
// 打包的時(shí)候移除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,
// 打包的時(shí)候移除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控制臺(tái)信息輸出方法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue build過程取消的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了js 實(shí)現(xiàn)拖拽排序，拖拽排序?qū)τ谛』锇閭儊碚f應(yīng)該不陌生，平時(shí)工作的時(shí)候，可能會(huì)選擇使用類似Sortable.js這樣的開源庫來實(shí)現(xiàn)需求。但在完成需求后，大家有沒有沒想過拖拽排序是如何實(shí)現(xiàn)的呢？感興趣得話一起來看看下面文章得小心內(nèi)容吧2021-11-11
一個(gè)Vue視頻媒體多段裁剪組件的實(shí)現(xiàn)示例
這篇文章主要介紹了一個(gè)Vue媒體多段裁剪組件的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue3中setup語法糖下父子組件間傳遞數(shù)據(jù)的方式
Vue3中父組件指的是包含一個(gè)或多個(gè)子組件的組件，它們通過props和事件等方式來傳遞數(shù)據(jù)和通信，這篇文章主要介紹了vue3中setup語法糖下父子組件間傳遞數(shù)據(jù)的方式,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue全局使用axios的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
sortable+element 實(shí)現(xiàn)表格行拖拽的方法示例
這篇文章主要介紹了sortable+element 實(shí)現(xiàn)表格行拖拽的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性，這時(shí)使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2023-02-02
element-plus 在vue3 中不生效的原因解決方法(element-plus引入)
這篇文章主要介紹了element-plus 在vue3 中不生效的原因解決方法(element-plus引入),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
在vue3版本中，引入了一個(gè)新的函數(shù)，叫做setup，引入他的原因總結(jié)一下主要原因是：為了使用組合式 API，setup函數(shù)是Composition 的入口。本文將詳細(xì)介紹一下Vue3中setup函數(shù)的使用教程，感興趣的可以了解一下2022-07-07
vue項(xiàng)目前端錯(cuò)誤收集之sentry教程詳解
Sentry 是一個(gè)開源的錯(cuò)誤追蹤工具，可以幫助開發(fā)人員實(shí)時(shí)監(jiān)控和修復(fù)系統(tǒng)中的錯(cuò)誤。這篇文章主要介紹了vue項(xiàng)目前端錯(cuò)誤收集之sentry,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式
這篇文章主要介紹了vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09