Vue Cli3 打包配置并自動(dòng)忽略console.log語(yǔ)句的方法
下載插件
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: './',
}
這時(shí)執(zhí)行 npm run build 打包后的文件就沒(méi)有 console.log 語(yǔ)句了。
不過(guò)這時(shí)會(huì)有一個(gè)問(wèn)題，就是在開(kāi)發(fā)環(huán)境的時(shí)候編譯會(huì)非常慢。例如修改了一個(gè)變量的值，我的電腦要編譯 10 秒才能重新刷出來(lái)頁(yè)面，一直卡在 92% chunk asset optimization。
由于去掉 console.log 語(yǔ)句這個(gè)功能只有在打包時(shí)才需要，所以我們可以加一個(gè)判斷，只在生產(chǎn)環(huán)境時(shí)才把上述配置代碼加上。
所以正確的配置如下：
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 生產(chǎn)包去除console.log
不安裝插件去除console.log的方法
vue-cli3.0在打包過(guò)程中就使用了terser-webpack-plugin插件進(jìn)行優(yōu)化，具體配置可以node_modules/@vue/cli-service/lib/config/prod.js中看到。
這里使用了環(huán)境變量進(jìn)行控制，只有打生產(chǎn)包的時(shí)候才會(huì)調(diào)用這個(gè)插件進(jìn)行打包優(yōu)化。
terser-webpack-plugin的具體配置在同一個(gè)文件夾下terserOptions.js中，只要在這個(gè)文件中compress對(duì)象中加入以下幾個(gè)屬性就可以了
warnings: false, drop_console: true, drop_debugger: true, pure_funcs: ['console.log']
到此這篇關(guān)于Vue Cli3 打包配置并自動(dòng)忽略console.log語(yǔ)句的方法的文章就介紹到這了,更多相關(guān)Vue Cli3打包并忽略console.log內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問(wèn)題及解決
這篇文章主要介紹了vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue中mint-ui環(huán)境搭建詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細(xì)介紹了如何使用Vue編寫(xiě)一個(gè)簡(jiǎn)單的日期選擇器,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
這篇文章主要介紹了vue使用xlsx導(dǎo)入到表格中代碼,具體實(shí)現(xiàn)是先通過(guò)FileReader將上傳的文件讀取為二進(jìn)制數(shù)據(jù),然后使用xlsx將它解析成JSON數(shù)據(jù),最后將JSON數(shù)據(jù)填充到表格中,需要的朋友可以參考下2023-11-11
vue項(xiàng)目部署到非根目錄下的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目部署到非根目錄下的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問(wèn)題的解決
這篇文章主要介紹了vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問(wèn)題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例
這篇文章主要介紹了antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
詳解在vue-cli項(xiàng)目中使用mockjs(請(qǐng)求數(shù)據(jù)刪除數(shù)據(jù))
本篇文章主要介紹了在vue-cli項(xiàng)目中使用mockjs(請(qǐng)求數(shù)據(jù)刪除數(shù)據(jù))，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家介紹了vue3動(dòng)態(tài)綁定背景圖片實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法
我們經(jīng)常需要接入統(tǒng)計(jì)服務(wù)以方便運(yùn)營(yíng)，這篇文章主要介紹了Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02