Vue Cli3 打包配置并自動忽略console.log語句的方法
下載插件
npm i -D uglifyjs-webpack-plugin
在 vue.config.js 引入使用
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true,
},
},
}),
],
},
devServer: {
proxy: {
'/xxx': {
target: 'http://192.168.150.17:8080/',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/xxx': 'xxx',
},
},
},
},
publicPath: './',
}
這時執(zhí)行 npm run build 打包后的文件就沒有 console.log 語句了。
不過這時會有一個問題，就是在開發(fā)環(huán)境的時候編譯會非常慢。例如修改了一個變量的值，我的電腦要編譯 10 秒才能重新刷出來頁面，一直卡在 92% chunk asset optimization。
由于去掉 console.log 語句這個功能只有在打包時才需要，所以我們可以加一個判斷，只在生產環(huán)境時才把上述配置代碼加上。
所以正確的配置如下：
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const config = {
devServer: {
proxy: {
'/xxx': {
target: 'http://192.168.150.17:8080/',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/xxx': 'xxx',
},
},
},
},
publicPath: './',
}
if (process.env.NODE_ENV === 'production') {
config.configureWebpack = {
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true,
},
},
}),
],
}
}
module.exports = config
vue-cli3.0 生產包去除console.log
不安裝插件去除console.log的方法
vue-cli3.0在打包過程中就使用了terser-webpack-plugin插件進行優(yōu)化，具體配置可以node_modules/@vue/cli-service/lib/config/prod.js中看到。
這里使用了環(huán)境變量進行控制，只有打生產包的時候才會調用這個插件進行打包優(yōu)化。
terser-webpack-plugin的具體配置在同一個文件夾下terserOptions.js中，只要在這個文件中compress對象中加入以下幾個屬性就可以了
warnings: false, drop_console: true, drop_debugger: true, pure_funcs: ['console.log']
到此這篇關于Vue Cli3 打包配置并自動忽略console.log語句的方法的文章就介紹到這了,更多相關Vue Cli3打包并忽略console.log內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue如何解決子組件data從props中無法動態(tài)更新數據問題
這篇文章主要介紹了Vue如何解決子組件data從props中無法動態(tài)更新數據問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue從零實現(xiàn)一個消息通知組件的方法,結合實例形式分析了vue實現(xiàn)消息通知組件的具體原理、實現(xiàn)步驟、與相關操作技巧,需要的朋友可以參考下2020-03-03
在Vue-cli里應用Vuex的state和mutations方法
今天小編就為大家分享一篇在Vue-cli里應用Vuex的state和mutations方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue和H5 draggable實現(xiàn)拖拽并替換效果
這篇文章主要為大家詳細介紹了vue和H5 draggable實現(xiàn)拖拽并替換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
本文主要介紹了vue實現(xiàn)頁面div盒子拖拽排序功能，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Vue2.x中利用@font-size引入字體圖標報錯的解決方法
今天小編就為大家分享一篇Vue2.x中利用@font-size引入字體圖標報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue element-ui el-cascader級聯(lián)選擇器數據回顯的兩種實現(xiàn)方法
這篇文章主要介紹了vue element-ui el-cascader級聯(lián)選擇器數據回顯的兩種實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。2023-07-07
van-uploader保存文件到后端回顯后端接口返回的數據
前端開發(fā)想省時間就是要找框架呀,下面這篇文章主要給大家介紹了關于van-uploader保存文件到后端回顯后端接口返回的數據,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue-cli腳手架安裝，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
Vue是一種流行的Web開發(fā)框架,它提供了一個雙向綁定的語法糖。在Vue中,我們可以很容易地獲取頁面上的數據,并且可以實時的響應其變化,這篇文章主要給大家介紹了關于Vue獲取input值的四種常用方法,需要的朋友可以參考下2023-09-09