寫在前面：
npm run build 是vue-cli用來打包專案的命令列，本文是關於vue-cli打包的一些常見的坑，會盡量詳細的寫每個步驟，大家可以一邊看著文章，一邊打包試試。有需要的朋友可以做一下參考，喜歡的可以點波贊，或者關注一下，希望可以幫到大家。
初始化一個專案：
這裡初始化一個專案，因為導致打包錯誤的原因多種多樣，避免因為其他設定錯誤干擾，從頭開始打包整體步驟也會更加清晰。
命令列：
vue init webpack build1(專案名)
//吧啦吧啦進行一波設定
//進入專案資料夾
npm install複製程式碼如果還不清楚如何初始化執行一個專案，可以參考我之前寫的一篇文章：傳送門。
開始打包踩坑
命令列：
//直接打包
npm run build複製程式碼打包出來的檔案
第一個坑：檔案引用路徑
現在專案我們什麼都沒動，是初始化之後直接打包的狀態，開啟dist/index.htmnl檔案整個網頁都是一片空白的。
開啟除錯，發現有一排報錯說是：不能載入到資源，後面就發現路徑的問題，仔細看上面再看上面載入的css的引用路徑，這裡是有問題的。
爬坑：
檔案位置：config資料夾/index.js檔案
1.更改assetsPublicPath屬性：
檔案裡面有兩個assetsPublicPath屬性，更改第一個，也就是更改build裡面的assetsPublicPath屬性：
assetsPublicPath:'/'//false
assetsPublicPath:'./'//true複製程式碼assetsPublicPath屬性作用是指定編譯釋出的根目錄，'/'指的是專案的根目錄 ，'./'指的是當前目錄。
2.改好設定之後，重新打包。
開啟打包檔案：
錯誤原因：
打包出來所有的檔案都會放在dist的static資料夾下面，index.html要載入檔案，那麼問題來了，'/'指的是專案的根目錄 ，'./'指的是當前目錄。要選哪個？當然選擇原諒她了。
第二個坑：路由history模式。
這個坑是當你使用了路由之後，在沒有後端配合的情況下就手賤開啟路由history模式的時候，打包出來的檔案也會是一片空白的情況，很多人踩這個坑的時候花了很多時間，網上的教程基本上都是說的第一個坑，這個坑很少有人提起。
打包之前的樣子：
這裡我弄了個示例，因為是剛建立的專案沒有其他因素干擾，當你開啟路由的history模式之後，開發的時候一切正常
打包之後的樣子：
解決方式：
// mode: 'history',//將這個模式關閉就好複製程式碼這裡並不是說不能開啟這個模式，這個模式需要後端設定的配合，詳情可以看：路由文件
Gzip 檔案壓縮
順帶分享一個很6的優化打包的方法，用起來也簡單的很，只要下載一個外掛，然後開啟一個設定就好了。
設定方法：
這裡其實是webpack自帶的一個優化打包的方法，開啟這個配置後如果沒有下載那個外掛，會提示你下載，下載就好了。
然後在打包的時候，每個js和css檔案會壓縮一個gz字尾的資料夾，瀏覽器如果支援g-zip 會自動查詢有沒有gz檔案 找到了就載入gz然後本地解壓 執行。
開啟這個配置會之後對整體的打包體積也就是dist資料夾並沒有太大的變化。下圖來看看他的壓縮率以及對載入的提升，可以說是非常大且明顯的，大家可以自己試一下就知道多好用了。
後話
之前自己打包的時候連著踩了不少坑，可能是互相關聯的，有時候你並不是錯了一個地方，要想想自己其他地方是不是也是錯的。上述的內容，算是自己踩坑的一些經驗，希望可以幫到大家。
最後：如需轉載，請放上原文連結並署名。碼字不易，感謝支援！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我。
掘金個人主頁
以上2017.10.10