vue3.0 vue-router4.0打包后頁面空白的解決方法
開發(fā)環(huán)境可以正常渲染頁面，路由跳轉(zhuǎn)都沒有問題，但是打包之后本地打開index.html出現(xiàn)報(bào)錯(cuò)或者頁面空白的情況：
腳手架版本：
vue-router版本：
第一種報(bào)錯(cuò)-資源加載失敗
這種錯(cuò)誤是因?yàn)関ue.config.js的配置里面 publicPath寫了絕對(duì)路徑，生產(chǎn)環(huán)境改為./相對(duì)路徑即可，vue.config.js詳細(xì)配置參考官方文檔
第二種錯(cuò)誤：無報(bào)錯(cuò)，js加載了，但是頁面空白（router-view沒有渲染任何內(nèi)容）
這種情況是因?yàn)関ue-router的history模式，history模式下訪問頁面地址欄的地址沒有#
這種情況可以把history模式改為hash模式，丑是丑了點(diǎn)，但是我做的是手機(jī)端的頁面，用戶也看不見地址欄，所以無所謂吧（丑總比加載不出來好）
在配置路由的router.js里面，把createWebHistory改成createWebHashHistory
然后就可以了。
到此這篇關(guān)于vue3.0 vue-router4.0打包后頁面空白的解決方法的文章就介紹到這了,更多相關(guān)vue3.0 vue-router4.0打包空白內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue如何調(diào)用接口請(qǐng)求頭增加參數(shù)
這篇文章主要介紹了Vue如何調(diào)用接口請(qǐng)求頭增加參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
使用element+vuedraggable實(shí)現(xiàn)圖片上傳拖拽排序
這篇文章主要為大家詳細(xì)介紹了使用element+vuedraggable實(shí)現(xiàn)圖片上傳拖拽排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue 實(shí)現(xiàn)CLI 3.0 + momentjs + lodash打包時(shí)優(yōu)化
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)CLI 3.0 + momentjs + lodash打包時(shí)優(yōu)化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)
本文給大家分享Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式，方式一是通過監(jiān)聽事件實(shí)現(xiàn)方式二是通過 v-model 實(shí)現(xiàn)，每種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-11-11
vue中使用v-for時(shí)為什么不能用index作為key
這篇文章主要介紹了vue中使用v-for時(shí)為什么不能用index作為key，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue報(bào)錯(cuò):TypeError:Cannot create property '
這篇文章主要介紹了Vue報(bào)錯(cuò):TypeError:Cannot create property 'xxx' on string 'xxxx'問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
本文主要介紹了vue組件中重新渲染的3種方式小結(jié),主要包括改變key,v-if,vm.$forceUpdate()這三種,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
在項(xiàng)目中很多時(shí)候需要用到vue打包成html不需要放在服務(wù)器上就能瀏覽,根據(jù)官網(wǎng)打包出來的html直接打開是顯示空白,下面這篇文章主要給大家介紹了關(guān)于vue打包后出現(xiàn)空白頁的原因及解決方式的相關(guān)資料,需要的朋友可以參考下2022-07-07
watch的基本用法是在Vue實(shí)例中定義一個(gè)watch對(duì)象,該對(duì)象內(nèi)部包含需要監(jiān)聽的數(shù)據(jù)項(xiàng)和對(duì)應(yīng)的回調(diào)函數(shù)，這篇文章主要介紹了vue2中watch的使用,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了 vue指令v-html和v-text，文章圍繞vue指令v-html和v-text的相關(guān)資料展開詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對(duì)大家有所幫助2021-11-11