欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue-cli webpack打包開啟Gzip 報錯問題

 更新時間:2019年07月24日 09:13:09   作者:帝鴻琬琰  
這篇文章主要介紹了vue-cli webpack打包開啟Gzip 報錯問題的解決方法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

  前兩天項目上線,用vue-cli npm run build命令打包,打包完成后我擦嚇了一跳,15M。本來暫時不打算優(yōu)化的,但是每次看著部署包這么大,想想還是先優(yōu)化一下,讓包好看點,免得以后出現(xiàn)心理陰影!

  在把 map文件干掉后,發(fā)現(xiàn)webpack這打包的速度,也忒感人了。在進行不自動生成 map文件設置時,有看到webpack自帶的productionGzip功能,索性就一次性一起鼓搗鼓搗。

下面是瞎鼓搗歷程,差點就鼓搗不出來了。

  1、在項目 根目錄config/index.js中build內(nèi)找到productionGzip: false,把false改為true。與 productionSourceMap 剛好相反。

  

屬性值修改后,這個時候可以執(zhí)行 npm run build。但是會報錯,提示找不到 "Cannot find module 'compression-webpack-plugin'"

  

  2、也就是說需要安裝依賴compression-webpack-plugin 官方推薦的命令是:(但是網(wǎng)不好的話就涼涼了)

npm install --save-dev compression-webpack-plugin //在沒有給定版本號時該命令默認安裝最新版compression-webpack-plugin,問題恰恰就出在這

    安裝完成以后,重新運行 npm run build,然后悲劇了:

  

    從報錯顯示獲知,是配置選項驗證失敗,但是是哪一項驗證失敗,或者那些項驗證失敗就不曉得了,打開報錯日志,越看越蒙圈了,一臉茫然。從源代碼里面也沒看出個所以然。

    

從校驗參數(shù)來看,參數(shù)就兩個,但是第一個參數(shù)內(nèi)屬性很多。

  ,從結果看是這行代碼里面執(zhí)行的校驗失敗了。至于這行代碼執(zhí)行的什么,水平不夠查不下去了。

最后沒得法了,只能去官網(wǎng) https://www.npmjs.com/package/compression-webpack-plugin上看看,有么得啥突破。進去第一眼就瞄到了 2.0.0•Public•Published3 months ago,一下就感覺有點不對了,一般小版本的更新都是 1.xx.xx,很少這種直接全零的,全零的一般適用于大版本的升級更新,再看看上面的配置項檢驗失敗,選項屬性匹配不上。突然有種莫名被坑的感覺。接著看下面的介紹和文檔,①先對應了下node的版本 node@v8.11.3,還在匹配的范圍內(nèi)。② Requirements:This module requires a minimum of Node v6.9.0 and Webpack v4.0.0 (此模塊最低需要 Nodev6.9.0和Webpack v4.0.0),我這webpack版本明顯差一大截。這下總算找到癥結所在了。

        

    

  3、找到癥結所在,那處理起來就簡單了。既然最新版本太高,在用的webpack高攀不起,那就只能給它降級了,木得法。

    ①卸載已經(jīng)安裝的最新版2.0compression-webpack-plugin安裝包。

npm uninstall --save-dev compression-webpack-plugin

   ?、?重新安裝1.1.12版本(該版本為1.1的最新版)。卸載其實可以不用,直接執(zhí)行安裝命令,進行版本覆蓋也行。

npm install --save-dev compression-webpack-plugin@1.1.12    //記得帶版本號

   ?、鄣劝惭b好之后,重新執(zhí)行 npm run build 進行打包,終于成功了,真他媽艱難!

安裝過程中,還遇到另外一個問題。網(wǎng)速和墻的問題:

  

  這個倒是好解決,使用淘寶鏡像 就行。 安裝過程以及可能出現(xiàn)的問題和解決 可以移步http://www.dbjr.com.cn/article/166090.htm進行參考!

總結

以上所述是小編給大家介紹的解決vue-cli webpack打包開啟Gzip 報錯問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關文章

  • vue組件傳值的11種方式總結

    vue組件傳值的11種方式總結

    這篇文章主要介紹了vue組件傳值的11種方式總結,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vue中引入使用patch-package為依賴打補丁問題

    Vue中引入使用patch-package為依賴打補丁問題

    這篇文章主要介紹了Vue中引入使用patch-package為依賴打補丁問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue項目通過node連接MySQL數(shù)據(jù)庫并實現(xiàn)增刪改查操作的過程詳解

    Vue項目通過node連接MySQL數(shù)據(jù)庫并實現(xiàn)增刪改查操作的過程詳解

    最近在研究vue項目中使用node.js搭建server服務器,鏈接本地mysql數(shù)據(jù)庫,進行數(shù)據(jù)操作,下面這篇文章主要給大家介紹了關于Vue項目通過node連接MySQL數(shù)據(jù)庫并實現(xiàn)增刪改查操作的相關資料,需要的朋友可以參考下
    2022-05-05
  • Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng)(推薦)

    Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng)(推薦)

    這篇文章主要介紹了Vue+Element實現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng),需要的朋友可以參考下
    2019-12-12
  • vue3中的useAttrs和props的區(qū)別解析

    vue3中的useAttrs和props的區(qū)別解析

    在vue3中,?提供了一個?useAttrs?的方法它接收到的參數(shù)一?prop中可以接收到的數(shù)據(jù)是基本一樣的如果我們想自已寫一個組件,?把?elementPlus?中的期中一個組件封裝一下,這篇文章主要介紹了vue3中的useAttrs和props的區(qū)別,需要的朋友可以參考下
    2023-09-09
  • 詳解polyfills如何按需加載及場景示例詳解

    詳解polyfills如何按需加載及場景示例詳解

    這篇文章主要為大家介紹了詳解polyfills如何按需加載及場景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • 解決Vue3.0刷新頁面警告[Vue Router warn]:No match found for location with path /xxx

    解決Vue3.0刷新頁面警告[Vue Router warn]:No match 

    這篇文章主要介紹了解決Vue3.0刷新頁面警告[Vue Router warn]:No match found for location with path /xxx問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 淺談Vue2.0父子組件間事件派發(fā)機制

    淺談Vue2.0父子組件間事件派發(fā)機制

    本篇文章主要介紹了淺談Vue2.0父子組件間事件派發(fā)機制,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • Vue路由Hash模式分析

    Vue路由Hash模式分析

    Vue-router是Vue的核心組件,主要是作為Vue的路由管理器,Vue-router默認hash模式,本文講給大家詳細分析Vue路由Hash模式,文中有相關的代碼示例供大家參考,感興趣的同學可以借鑒一下
    2023-06-06
  • vue interceptor 使用教程實例詳解

    vue interceptor 使用教程實例詳解

    本文通過實例代碼給大家介紹了vue interceptor 使用,需要的朋友可以參考下
    2018-09-09

最新評論