快捷導(dǎo)航

Vue build過程取消console debugger控制臺信息輸出方法詳解

更新時間：2023年09月28日 10:56:27 作者：SHQ5785

這篇文章主要為大家介紹了Vue build過程取消console debugger控制臺信息輸出方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

一、前言

Vue項目開發(fā)過程中，會經(jīng)常需要使用console.log、console.info、alert等測試語句來輸出內(nèi)容，而在生產(chǎn)環(huán)境之中，我們不希望控制臺同樣輸出以上信息，特別是用戶信息相關(guān)。

組包前，逐一去刪除、注釋顯然費(fèi)時費(fèi)力，好在Vue提供了通過配置文件修改配置變量，實現(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')
}

Vue2合集

以上就是Vue build過程取消console debugger控制臺信息輸出方法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue build過程取消的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue3中router路由以及vuex的store使用解析
這篇文章主要介紹了vue3中router路由以及vuex的store使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點(diǎn)
本篇文章主要介紹了詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點(diǎn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問題
這篇文章主要介紹了Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問題,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-11-11
element表格數(shù)據(jù)部分模糊的實現(xiàn)代碼
這篇文章給大家介紹了element表格數(shù)據(jù)模糊的實現(xiàn)代碼,文中有詳細(xì)的效果展示和實現(xiàn)代碼供大家參考,具有一定的參考價值,需要的朋友可以參考下
2024-01-01
3分鐘讀懂移動端rem使用方法(推薦)
這篇文章主要介紹了rem使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Vue實現(xiàn)路由懶加載的多種方式總結(jié)
當(dāng)構(gòu)建的項目比較大的時候,懶加載可以分割代碼塊,提高頁面的初始加載效率解決白屏問題,下面是幾種常見vue路由懶加載的方法,感興趣的朋友跟隨小編一起看看吧
2023-11-11
vue-cli3全面配置詳解
這篇文章主要介紹了vue-cli3全面配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
vue中混入mixins的使用方法
mixins（混入）官方的描述是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式,這篇文章主要給大家介紹了關(guān)于vue中混入 mixins使用的相關(guān)資料,需要的朋友可以參考下
2021-10-10
vue實現(xiàn)pdf文檔在線預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)pdf文檔在線預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
vue如何通過插槽組件之間數(shù)據(jù)傳遞
這篇文章主要介紹了vue如何通過插槽組件之間數(shù)據(jù)傳遞問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06