快捷導(dǎo)航

Vue首屏白屏問題的原因和解決方法講解

更新時間：2023年05月08日 09:29:06 作者：stick6442

這篇文章主要介紹了Vue首屏白屏問題的原因和解決方法講解，Vue首屏白屏問題是指在頁面初次加載時，部分或全部內(nèi)容無法正常顯示，出現(xiàn)空白的情況。其原因可能是因為頁面渲染速度過慢，或者是因為網(wǎng)絡(luò)請求等問題導(dǎo)致數(shù)據(jù)無法及時加載

一.路由模式錯誤(路由重復(fù)或者沒有配置路由)

（1）由于把路由模式mode設(shè)置成history了，默認(rèn)是hash

解決方法：將模式改為hash模式，或者直接把模式配置刪除，而且history需要后端配合

（2）做動態(tài)路由時，next（）放行與next(...to, replace)區(qū)別造成的白屏，實質(zhì)是路由重復(fù)

（3）第一次正常訪問，刷新后白屏，vuex沒有與本地存儲結(jié)合，刷新后導(dǎo)致數(shù)據(jù)丟失

二.dist中文件引用路徑錯誤(vue項目打包的路徑問題)

打包后的dist目錄下的文件引用路徑不對，因找不到文件而報錯導(dǎo)致白屏

解決方法：vue.config.js中 publicPath: ''./"

三.瀏覽器不支持es6

在項目中使用了es6語法，一些瀏覽器不支持es6，造成編譯錯誤不能解析而造成白屏

解決方法：

安裝Babel ，Babel 會把這些新語法轉(zhuǎn)譯成較低版本的代碼。

npm install --save-dev @babel/core @babel/cli @babel/preset-env

四.加載文件資源過大

單頁面應(yīng)用的 html 是靠 js 生成，因為首屏需要加載很大的js文件(app.js 和vendor.js)，所以當(dāng)網(wǎng)速差的時候會產(chǎn)生一定程度的白屏

解決方法：

路由懶加載，組件懶加載

路由懶加載

// 1、Vue異步組件技術(shù)：
{
  path: '/home',
  name: 'Home',
  component: resolve => require(['../views/home.vue'], resolve)
}
// 2、es6提案的import()
{
  path: '/',
  name: 'home',
  component: () => import('../views/home.vue')
}
// 3、webpack提供的require.ensure()
{
  path: '/home',
  name: 'Home',
  component: r => require.ensure([],() =>  r(require('../views/home.vue')), 'home')
}

組件懶加載

// import 方式
components:{
  "dailyModal":()=>import("./dailyModal.vue")
},
// require 方式
components:{
  "dailyModal":resolve=>require(['./dailyModal.vue'],resolve)
},

到此這篇關(guān)于Vue首屏白屏問題的原因和解決方法講解的文章就介紹到這了,更多相關(guān)Vue首屏白屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: