資訊專欄INFORMATION COLUMN
摘要：修改完畢后再次打包，頁面還是空白頁，打開控制臺(tái)，也沒有抱任何錯(cuò)誤，查看元素，資源路徑也是正確的，如圖右側(cè)紅框再次陷入崩潰，控制臺(tái)無任何報(bào)錯(cuò)，于是就去各大網(wǎng)站找相關(guān)文章，好在一篇文章提到的模式。
由于對(duì)腳手架這些東西，運(yùn)用不是太熟，所以在打包項(xiàng)目時(shí)遇到一些小坑，在此做一下小結(jié)：
首次打包完畢，在本地打開dist下的入口頁面index.html時(shí)，頁面展示了一個(gè)大大的空白，打開控制臺(tái)顯示未發(fā)現(xiàn)要加載的資源，
此時(shí)查看元素，顯示路徑如下：
查找問題原因是由于打包時(shí)輸出的資源路徑問題，找到config文件夾下的index.js文件，找到assetsPublicPath參數(shù)，其默認(rèn)參數(shù)值是："/"如下圖：
將其修改為"./"，如下圖：
修改原因：assetsPublicPath為輸出后資源的根目錄，"/"是根目錄，參考的是盤符，是絕對(duì)路徑；而"./"是當(dāng)前目錄，參考的是當(dāng)前文件夾，是相對(duì)路徑。
修改完畢后再次打包，頁面還是空白頁，打開控制臺(tái)，也沒有抱任何錯(cuò)誤，查看元素，資源路徑也是正確的，如圖右側(cè)紅框：
再次陷入崩潰，控制臺(tái)無任何報(bào)錯(cuò)，于是就去各大網(wǎng)站找相關(guān)bug文章，好在一篇文章提到vue-router的模式。vue-router的兩種模式：hash模式和history模式。相關(guān)區(qū)別請(qǐng)移步官方文檔：vue HTML5History模式。修改如下圖所示：
修改前瀏覽器地址欄路徑：
修改后瀏覽器地址欄路徑：
折磨我將近兩天的，空白bug到此為止算是解決了，本篇文章，純屬自我筆記類，望同仁提出修改，共同提高！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103809.html
摘要：使用手機(jī)訪問演示頁面如果使用和創(chuàng)建項(xiàng)目。后手機(jī)不能通過網(wǎng)絡(luò)訪問演示頁面，原因是默認(rèn)使用計(jì)算機(jī)本地連接的地址作為網(wǎng)絡(luò)訪問地址修改地址為要使用的無線網(wǎng)絡(luò)地址就可以解決問題在之前的版本中可以修改目錄內(nèi)文件解決移除了文件后可嘗試如下解決辦法。 Vue-cli 3.5.1 + Webstorm 使用手機(jī)訪問演示頁面 如果使用Webstorm和Vue-cli 3.5.1創(chuàng)建項(xiàng)目。npm run s...
Vue應(yīng)用部署到服務(wù)器的正確方式 很多時(shí)候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測(cè)試沒有什么問題，但真正放在服務(wù)器上后，會(huì)發(fā)現(xiàn)或多或少的問題，比如：頁面出現(xiàn)空白現(xiàn)象，獲取資源路徑不對(duì)等，我相信以VueJs為技術(shù)棧來進(jìn)行前端開發(fā)的小伙伴或多或少都會(huì)遇到這樣的問題，我也遇到過，那現(xiàn)在我們就來一一解決這樣的問題。 如何打包 基于Vue-Cli,通過npm run build...
摘要：加載百度地圖后報(bào)錯(cuò)的，我們?cè)偌虞d一遍你的秘鑰你的秘鑰為當(dāng)前時(shí)間戳獲取方法 一、環(huán)境搭建 1、安裝node.js在計(jì)算機(jī)中https://nodejs.org/en/download/ （此為node.js官方下載地址）安裝完成后打開cmd命令提示符 node -v //查詢node版本號(hào) npm -v //查詢npm版本號(hào) 2、如果npm使用網(wǎng)速跟不上...
摘要：項(xiàng)目打包后上傳至，并實(shí)現(xiàn)的預(yù)覽打包項(xiàng)目項(xiàng)目命令行輸入打包命令，生成了文件夾打包完成。參考各位大佬求教一個(gè)問題項(xiàng)目打包后如何上傳到實(shí)現(xiàn)預(yù)覽上傳本地項(xiàng)目到和預(yù)覽使用數(shù)據(jù)怎么加載本地?cái)?shù)據(jù)能讓項(xiàng)目在上預(yù)覽 vue項(xiàng)目打包后上傳至GitHub，并實(shí)現(xiàn)github-pages的預(yù)覽 1. 打包vue 項(xiàng)目 vue項(xiàng)目：showImg(https://segmentfault.com/img/bVb...
閱讀 4446·2021-09-24 09:47
閱讀 1258·2021-09-03 10:33
閱讀 2135·2019-08-30 11:13
閱讀 1081·2019-08-30 10:49
閱讀 1808·2019-08-29 16:13
閱讀 2103·2019-08-29 11:28
閱讀 3147·2019-08-26 13:31
閱讀 3700·2019-08-23 17:14
