前端(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)境，對于正式項(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue中axios封裝使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前行變色
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前行變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
項(xiàng)目中Axios二次封裝實(shí)例Demo
vue項(xiàng)目經(jīng)常會用到axios來請求數(shù)據(jù),那么首先肯定需要對這個(gè)請求方法進(jìn)行一個(gè)二次封裝,這篇文章主要給大家介紹了關(guān)于項(xiàng)目中Axios二次封裝的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要為大家介紹了vue.js前端網(wǎng)頁彈框異步的行為示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助祝大家多多進(jìn)步，早日升職加薪2021-11-11
這篇文章主要為大家詳細(xì)介紹了vue echarts實(shí)現(xiàn)橫向柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
使用vue-cli3新建一個(gè)項(xiàng)目并寫好基本配置(推薦)
這篇文章主要介紹了使用vue-cli3新建一個(gè)項(xiàng)目并寫好基本配置的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能示例詳解
這篇文章主要介紹了vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-09-09
在vue中實(shí)現(xiàn)嵌套頁面(iframe)
這篇文章主要介紹了在vue中實(shí)現(xiàn)嵌套頁面(iframe)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了如何在Vue項(xiàng)目中使用axios請求，對Vue感興趣的同學(xué)，可以參考下2021-05-05