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