vue3.0 vue-router4.0打包后頁(yè)面空白的解決方法
開(kāi)發(fā)環(huán)境可以正常渲染頁(yè)面，路由跳轉(zhuǎn)都沒(méi)有問(wèn)題，但是打包之后本地打開(kāi)index.html出現(xiàn)報(bào)錯(cuò)或者頁(yè)面空白的情況：
腳手架版本：
vue-router版本：
第一種報(bào)錯(cuò)-資源加載失敗
這種錯(cuò)誤是因?yàn)関ue.config.js的配置里面 publicPath寫了絕對(duì)路徑，生產(chǎn)環(huán)境改為./相對(duì)路徑即可，vue.config.js詳細(xì)配置參考官方文檔
第二種錯(cuò)誤：無(wú)報(bào)錯(cuò)，js加載了，但是頁(yè)面空白（router-view沒(méi)有渲染任何內(nèi)容）
這種情況是因?yàn)関ue-router的history模式，history模式下訪問(wèn)頁(yè)面地址欄的地址沒(méi)有#
這種情況可以把history模式改為hash模式，丑是丑了點(diǎn)，但是我做的是手機(jī)端的頁(yè)面，用戶也看不見(jiàn)地址欄，所以無(wú)所謂吧（丑總比加載不出來(lái)好）
在配置路由的router.js里面，把createWebHistory改成createWebHashHistory
然后就可以了。
到此這篇關(guān)于vue3.0 vue-router4.0打包后頁(yè)面空白的解決方法的文章就介紹到這了,更多相關(guān)vue3.0 vue-router4.0打包空白內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue-cli3 從搭建到優(yōu)化的詳細(xì)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
在Vue項(xiàng)目中,引入到工程中的所有js、css文件,編譯時(shí)都會(huì)被打包進(jìn)vendor.js,瀏覽器在加載該文件之后才能開(kāi)始顯示首屏,本文主要介紹了Vue首屏優(yōu)化方案小結(jié),感興趣的可以了解一下2024-05-05
Vue中使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素的方法
?v-model?指令可以用在表單?input、textarea?及?select?元素上創(chuàng)建雙向數(shù)據(jù)綁定,它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素,本文給大家介紹Vue中如何使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素,感興趣的朋友一起看看吧2023-10-10
Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本文介紹了Vue的全局安裝過(guò)程、查看版本、安裝擴(kuò)展等步驟,并提供了解決在.vue文件目錄下運(yùn)行報(bào)錯(cuò)的方法,涉及到的錯(cuò)誤解決包括使用命令安裝@vue/compiler-sfc和執(zhí)行npm install命令安裝依賴2024-10-10
這篇文章主要介紹了vue3中的createApp分析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了VUEX?使用?mutations的兩種方式,實(shí)現(xiàn)方式就是利用vuex中的mutations，在mutations中定義一個(gè)方法，這個(gè)方法就是把點(diǎn)擊的index（也就是每個(gè)列表的唯一標(biāo)識(shí)），傳給state中的當(dāng)前標(biāo)識(shí)，需要的朋友可以參考下2023-01-01
詳解Vue3.0 + TypeScript + Vite初體驗(yàn)
這篇文章主要介紹了詳解Vue3.0 + TypeScript + Vite初體驗(yàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了Vue路由 重定向和別名的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
computed作為計(jì)算屬性其作用是描述響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯計(jì)算，當(dāng)所依賴的響應(yīng)式數(shù)據(jù)發(fā)生改變時(shí)計(jì)算屬性會(huì)重新計(jì)算，更新邏輯計(jì)算的結(jié)果，這篇文章主要介紹了Vue.js中的computed的功能設(shè)計(jì),需要的朋友可以參考下2023-06-06