vue中項目頁面空白但不報錯產(chǎn)生的原因及分析
vue項目頁面空白但不報錯產(chǎn)生的原因分析
vue項目中我們請求一個路由，打開頁面發(fā)現(xiàn)頁面是空白的，產(chǎn)生的主要原因有四種：
1.路由重復(fù)
如果配置了兩個路由是重復(fù)的，比如配置了兩個【path: ‘/’】，那么訪問就會看到空白頁面，這時候改下重復(fù)的路由配置即可
2.app.js中刪除了router-view
我們可以把 app.js看成路由的頂級路由，再創(chuàng)建路由他屬于二級路由，依次類推
3.路由導(dǎo)航守衛(wèi)沒有next（）
我們寫路由導(dǎo)航守衛(wèi)時，next相當(dāng)于是安保人員，只有他有權(quán)力進(jìn)行放行，如果他不進(jìn)行放行，我們肯定無法接著訪問，從而導(dǎo)致頁面空白
4.訪問的就是空白頁面
這種情況比較少，我們再訪問一個新的頁面時，一般會寫點文字進(jìn)行頁面展示
打包vue文件后頁面空白，出現(xiàn)報錯
報錯如下：
Refused to apply style from 'http://127.0.0.1:5500/css/chunk-43aa77e1.33bcbef1.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Failed to load resource: the server responded with a status of 404 (Not Found)
此塊代碼意思為：
拒絕應(yīng)用’http://127.0.0.1：5500/css/chunk-43aa77e1.33bcbef1.css’，因為它的MIME類型（‘text/html’）不是受支持的樣式表MIME類型，并且需要嚴(yán)格的MIME檢查已啟用。
失敗加載資源：服務(wù)器的響應(yīng)狀態(tài)為404（未找到）
Failed to load resource: the server responded with a status of 404 (Not Found)
此塊代碼意思為：
未能加載資源：服務(wù)器響應(yīng)狀態(tài)為404（未找到）
引起此類報錯的原因是因為js、css等文件過多，需手動添加（./）獲取當(dāng)前文件路徑，但js等文件過多手動添加路徑會引起沖突，
此類報錯的解決方案為：在根目錄中添加一個名為vue.config.js的文件，操作如下
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)大屏頁面的屏幕自適應(yīng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了Vue開發(fā)環(huán)境跨域訪問問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細(xì)介紹了vue.js devtools遇到問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
在Vue中嵌入第三方頁面可以采用多種方法,例如使用<iframe>、Vue插件、動態(tài)加載第三方腳本或WebComponents,不同方法適用于不同類型的內(nèi)容和項目需求,如<iframe>適用于整個網(wǎng)頁,而動態(tài)腳本和WebComponents適合特定功能,選擇合適的方法可以有效整合外部資源2024-09-09
獲取路由詳細(xì)內(nèi)容信息是我們?nèi)粘ｉ_發(fā)中經(jīng)常會遇到的需求,下面這篇文章主要給大家介紹了關(guān)于vue獲取路由詳細(xì)內(nèi)容信息的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
使用VUE實現(xiàn)一鍵復(fù)制內(nèi)容功能
這篇文章主要介紹了使用VUE實現(xiàn)一鍵復(fù)制內(nèi)容功能,功能就是當(dāng)我們點擊復(fù)制按鈕時，會提示“復(fù)制成功”，這樣復(fù)制的內(nèi)容就可以在其他地方使用了，感興趣的朋友可以學(xué)習(xí)一下2023-04-04
在項目需求中我們會遇到國際化的中英文切換,這篇文章主要給大家介紹了關(guān)于前端VUE雙語實現(xiàn)方案的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
vue2.6.10+vite2開啟template模板動態(tài)編譯的過程
這篇文章主要介紹了vue2.6.10+vite2開啟template模板動態(tài)編譯,本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
vue打包上傳服務(wù)器加載提示錯誤Loading chunk {n} failed
這篇文章主要為大家介紹了vue打包上傳服務(wù)器加載提示錯誤Loading chunk {n} failed解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
在Vue組件中,我們經(jīng)常使用<style?scoped>屬性來實現(xiàn)樣式封裝,期望組件樣式只對當(dāng)前組件生效,不會污染全局樣式,然而,在實際開發(fā)中,即使使用了scoped屬性,同名樣式類的混淆問題仍然時有發(fā)生,所以本文介紹了Vue?Scoped樣式混淆的問題分析與解決方案,需要的朋友可以參考下2025-10-10