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

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

這篇文章主要介紹了Vue首屏白屏問題的原因和解決方法講解，Vue首屏白屏問題是指在頁面初次加載時(shí)，部分或全部?jī)?nèi)容無法正常顯示，出現(xiàn)空白的情況。其原因可能是因?yàn)轫撁驿秩舅俣冗^慢，或者是因?yàn)榫W(wǎng)絡(luò)請(qǐng)求等問題導(dǎo)致數(shù)據(jù)無法及時(shí)加載

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

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

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

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

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

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

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

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

三.瀏覽器不支持es6

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

解決方法：

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

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

四.加載文件資源過大

單頁面應(yīng)用的 html 是靠 js 生成，因?yàn)槭灼列枰虞d很大的js文件(app.js 和vendor.js)，所以當(dāng)網(wǎng)速差的時(shí)候會(huì)產(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: