快捷導(dǎo)航

前端(VUE)打包上線去除console.log解決方案

更新時(shí)間：2025年02月27日 10:28:17 作者：lnbcj

這篇文章主要介紹了如何在前端項(xiàng)目中使用terser-webpack-plugin插件來刪除代碼中的console.log語句,以避免在正式環(huán)境中輸出調(diào)試信息,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

前端項(xiàng)目打包上線時(shí)經(jīng)常遇到一個(gè)問題，寫代碼時(shí)的console.log忘記刪除帶到了正式環(huán)境，對(duì)于正式項(xiàng)目肯定是不友好的。可以直接使用插件“terser-webpack-plugin”來解決

引入

npm install terser-webpack-plugin --save-dev

配置

使用webpack構(gòu)建的項(xiàng)目

在你的 webpack.config.js 中，配置 terser-webpack-plugin：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 其他配置項(xiàng)...
  optimization: {
    minimize: true, // 必須開啟，否則配置不失效
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

使用vue-cli構(gòu)建的項(xiàng)目

在你的 vue.config.js 中，配置 terser-webpack-plugin：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 其他配置項(xiàng)...
configureWebpack: config => {
    // 去除打包后的console.log
    let optimization = {
      minimize: true, // 必須開啟，否則配置不失效
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true,
            },
          },
        }),
      ],
    };
    Object.assign(config, {
      optimization,
    });
  },
};

總結(jié)

到此這篇關(guān)于前端(VUE)打包上線去除console.log解決方案的文章就介紹到這了,更多相關(guān)VUE打包上線去除console.log內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue axios請(qǐng)求成功卻進(jìn)入catch的原因分析
這篇文章主要介紹了vue axios請(qǐng)求成功卻進(jìn)入catch的原因分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法
Vue3 使用 proxy 對(duì)象代理,而 echarts 則使用了大量的全等（===）, 對(duì)比失敗從而導(dǎo)致了bug,這篇文章主要介紹了Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法,需要的朋友可以參考下
2023-08-08
10分鐘了解Vue3遞歸組件的用法
遞歸?簡(jiǎn)單來講就是程序自己調(diào)用自身,vue中的遞歸組件就是,組件自身調(diào)用自身,下面這篇文章主要給大家介紹了關(guān)于Vue3遞歸組件的用法,需要的朋友可以參考下
2022-03-03
Vue項(xiàng)目打包部署總結(jié)篇
這篇文章主要介紹了Vue項(xiàng)目打包部署總結(jié)篇,關(guān)于Vue項(xiàng)目發(fā)布的相關(guān)問題就先總結(jié)這么多,幾乎在每一步都踩過坑才有所體會(huì),有問題歡迎各位同學(xué)一起探討,需要的朋友可以參考下
2024-08-08
詳解Vue 全局變量，局部變量
這篇文章主要介紹了Vue全局變量局部變量，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
在Vue?3中使用OpenLayers加載GPX數(shù)據(jù)并顯示圖形效果
本文介紹了如何在Vue 3中使用OpenLayers加載GPX格式的數(shù)據(jù)并在地圖上顯示圖形,通過使用OpenLayers的GPX解析器,我們能夠輕松地處理和展示來自GPS設(shè)備的地理數(shù)據(jù),需要的朋友可以參考下
2024-12-12
vue實(shí)現(xiàn)鼠標(biāo)懸浮框效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)懸浮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)4
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料，介紹了Array的變異方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
vue.js全局組件和局部組件示例代碼
組件是Vue.js的最核心的功能,所謂的組件化就是把頁面拆分成多個(gè)組件,每個(gè)組件單獨(dú)使用CSS,JS,模板,圖片等資源進(jìn)行開發(fā)與維護(hù),然后在制作網(wǎng)頁的時(shí)候根據(jù)需要調(diào)用相關(guān)的組件,這篇文章主要給大家介紹了關(guān)于vue.js全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下
2022-12-12
Vuex,iView UI面包屑導(dǎo)航使用擴(kuò)展詳解
今天小編就為大家分享一篇Vuex,iView UI面包屑導(dǎo)航使用擴(kuò)展詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11