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