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

whatsns 發布于2019-08-23 17:06 / 701人閱讀

摘要：修改完畢后再次打包，頁面還是空白頁，打開控制臺，也沒有抱任何錯誤，查看元素，資源路徑也是正確的，如圖右側紅框再次陷入崩潰，控制臺無任何報錯，于是就去各大網站找相關文章，好在一篇文章提到的模式。

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

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

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

將其修改為"./"，如下圖：

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

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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103809.html

Vue-cli 3.5.1 + Webstorm 使用手機訪問演示頁面

摘要：使用手機訪問演示頁面如果使用和創建項目。后手機不能通過網絡訪問演示頁面，原因是默認使用計算機本地連接的地址作為網絡訪問地址修改地址為要使用的無線網絡地址就可以解決問題在之前的版本中可以修改目錄內文件解決移除了文件后可嘗試如下解決辦法。 Vue-cli 3.5.1 + Webstorm 使用手機訪問演示頁面如果使用Webstorm和Vue-cli 3.5.1創建項目。npm run s...

CrazyCodes 2019-08-23 15:59 評論0 收藏0
Vue應用部署到服務器的正確方式

Vue應用部署到服務器的正確方式很多時候我們發現辛辛苦苦寫的VueJs應用經過打包后在自己本地搭建的服務器上測試沒有什么問題，但真正放在服務器上后，會發現或多或少的問題，比如：頁面出現空白現象，獲取資源路徑不對等，我相信以VueJs為技術棧來進行前端開發的小伙伴或多或少都會遇到這樣的問題，我也遇到過，那現在我們就來一一解決這樣的問題。如何打包基于Vue-Cli,通過npm run build...

xcc3641 2019-08-20 18:00 評論0 收藏0
vue-cli+webpack開發流程總結

摘要：加載百度地圖后報錯的，我們再加載一遍你的秘鑰你的秘鑰為當前時間戳獲取方法一、環境搭建 1、安裝node.js在計算機中https://nodejs.org/en/download/ （此為node.js官方下載地址）安裝完成后打開cmd命令提示符 node -v //查詢node版本號 npm -v //查詢npm版本號 2、如果npm使用網速跟不上...

shiweifu 2019-08-23 14:55 評論0 收藏0
vue項目打包后上傳至GitHub，并實現github-pages的預覽

摘要：項目打包后上傳至，并實現的預覽打包項目項目命令行輸入打包命令，生成了文件夾打包完成。參考各位大佬求教一個問題項目打包后如何上傳到實現預覽上傳本地項目到和預覽使用數據怎么加載本地數據能讓項目在上預覽 vue項目打包后上傳至GitHub，并實現github-pages的預覽 1. 打包vue 項目 vue項目：showImg(https://segmentfault.com/img/bVb...

wangdai 2019-08-23 17:17 評論0 收藏0