vue-cli npm run build空白頁的兩個坑 webpack gzip文件壓縮優化打包文件

寫在前面：

npm run build 是vue-cli用來打包項目的命令行，本文是關於vue-cli打包的一些常見的坑，會盡可能詳細的寫每一個步驟，你們能夠一邊看着文章，一邊打包試試。有須要的朋友能夠作一下參考，喜歡的能夠點波贊，或者關注一下，但願能夠幫到你們。

初始化一個項目：

這裏初始化一個項目，由於致使打包錯誤的緣由多種多樣，避免由於其餘設置錯誤干擾，從頭開始打包總體步驟也會更加清晰。

命令行：

vue init webpack build1(項目名)
//吧啦吧啦進行一波設置
//進入項目文件夾
npm install複製代碼

若是還不清楚如何初始化運行一個項目，能夠參考我以前寫的一篇文章：傳送門。

開始打包踩坑

命令行：

//直接打包
npm run build複製代碼

打包出來的文件

vue-cli項目文件打包位置

第一個坑：文件引用路徑

如今項目咱們什麼都沒動，是初始化以後直接打包的狀態，打開dist/index.htmnl文件整個網頁都是一片空白的。

打開調試，發現有一排報錯說是：不能加載到資源，後面就發現路徑的問題，仔細看上面再看上面加載的css的引用路徑，這裏是有問題的。

爬坑：

文件位置：config文件夾/index.js文件

1.更改assetsPublicPath屬性：

文件裏面有兩個assetsPublicPath屬性，更改第一個，也就是更改build裏面的assetsPublicPath屬性：

assetsPublicPath:'/'//false
assetsPublicPath:'./'//true複製代碼

assetsPublicPath屬性做用是指定編譯發佈的根目錄，'/'指的是項目的根目錄 ，'./'指的是當前目錄。

2.改好設置以後，從新打包。

打開打包文件：

從新打開index.html

錯誤緣由：

dist文件夾

打包出來全部的文件都會放在dist的static文件夾下面，index.html要加載文件，那麼問題來了，'/'指的是項目的根目錄 ，'./'指的是當前目錄。要選哪一個？固然選擇原諒她了。

第二個坑：路由history模式。

這個坑是當你使用了路由以後，在沒有後端配合的狀況下就手賤打開路由history模式的時候，打包出來的文件也會是一片空白的狀況，不少人踩這個坑的時候花了不少時間，網上的教程基本上都是說的第一個坑，這個坑不多有人提起。

圖片出自vue-router文檔

打包以前的樣子：

這裏我弄了個示例，由於是剛建立的項目沒有其餘因素干擾，當你打開路由的history模式以後，開發的時候一切正常

打包以前的路由

打包以後的樣子：

打包以後路徑也是對的，可是頁面一片空白

解決方式：

// mode: 'history',//將這個模式關閉就好複製代碼

這裏並非說不能打開這個模式，這個模式須要後端設置的配合，詳情能夠看：路由文檔

---

Gzip 文件壓縮

順帶分享一個很6的優化打包的方法，用起來也簡單的很，只要下載一個插件，而後打開一個設置就行了。

設置方法：

這裏實際上是webpack自帶的一個優化打包的方法，打開這個配置後若是沒有下載那個插件，會提示你下載，下載就行了。

而後在打包的時候，每一個js和css文件會壓縮一個gz後綴的文件夾，瀏覽器若是支持g-zip 會自動查找有沒有gz文件 找到了就加載gz而後本地解壓 執行。

打開這個配置會以後對總體的打包體積也就是dist文件夾並無太大的變化。下圖來看看他的壓縮率以及對加載的提高，能夠說是很是大且明顯的，你們能夠本身試一下就知道多好用了。

後話

以前本身打包的時候連着踩了很多坑，多是互相關聯的，有時候你並非錯了一個地方，要想一想本身其餘地方是否是也是錯的。上述的內容，算是本身踩坑的一些經驗，但願能夠幫到你們。

最後：如需轉載，請放上原文連接並署名。碼字不易，感謝支持！本人寫文章本着交流記錄的心態，寫的很差之處，不撕逼，可是歡迎指點。而後就是但願看完的朋友點個喜歡，也能夠關注一下我。
掘金我的主頁

以上2017.10.10