vue通過vue-cli打包後本地打開頁面資源加載報錯，頁面空白

因爲對腳手架這些東西，運用不是太熟，因此在打包項目時遇到一些小坑，在此作一下小結：
首次打包完畢，在本地打開dist下的入口頁面index.html時，頁面展現了一個大大的空白，打開控制檯顯示未發現要加載的資源，

此時查看元素，顯示路徑以下：

查找問題緣由是因爲打包時輸出的資源路徑問題，找到config文件夾下的index.js文件，找到assetsPublicPath參數，其默認參數值是：'/'以下圖：

將其修改成'./'，以下圖：

修改緣由：assetsPublicPath爲輸出後資源的根目錄，'/'是根目錄，參考的是盤符，是絕對路徑；而'./'是當前目錄，參考的是當前文件夾，是相對路徑。
修改完畢後再次打包，頁面仍是空白頁，打開控制檯，也沒有抱任何錯誤，查看元素，資源路徑也是正確的，如圖右側紅框：

再次陷入崩潰，控制檯無任何報錯，因而就去各大網站找相關bug文章，好在一篇文章提到vue-router的模式。vue-router的兩種模式：hash模式和history模式。相關區別請移步官方文檔：vue HTML5History模式。修改以下圖所示：

修改前瀏覽器地址欄路徑：

修改後瀏覽器地址欄路徑：

折磨我將近兩天的，空白bug到此爲止算是解決了，本篇文章，純屬自我筆記類，望同仁提出修改，共同提升！