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