Vue預渲染打包後,重新整理會閃現首頁的解決

2021-09-24 22:47:49 字數 637 閱讀 1620

vue預渲染後打包上線後,重新整理當前頁面後會出現首頁突然展示,隨即再回到當前路由下頁面的情況。

這是因為在使用prerender-spa-plugin預渲染後,配置是對應的路由會生成index.html檔案。因為配置預渲染需要將路由配置為history模式,在nginx或者apache配置裡,會將url重定向到根目錄的index.html,所以在頁面還沒有被vue給接管的時候,重新整理的一瞬間是會展示預渲染時候生成的根目錄的index.html的內容。

上圖是通過預渲染生成的index.html檔案的 內容。重新整理時候展示的就是這個。

解決:

到此就結束了,如果重新整理過程**現白屏,可以在index.hml裡面寫乙個loading動畫,優化體驗 

vue2 0使用預渲染

檔案目錄如下 執行後如下圖 首頁的網路請求只有乙個,沒有對應的文字和元件,不利於seo 1.router的模式必須是history 2.核心外掛程式 npm install prerender spa plugin d 3.在build webpack.prod.conf.js內部引入渲染器 con...

vue 預渲染遇到的坑

最近公司專案需要增加seo搜尋引擎優化,到網上找了下資料,有預渲染和服務端渲染兩種方式,考慮到只需要渲染首頁所以我選擇了先啟用比較簡單的預渲染方式來做seo!1 安裝 prerender spa plugin,使用 映象安裝 cnpm cnpm install prerender spa plugi...

vue 強制重新整理元件重新渲染

實現功能 問題描述 父元件給子元件傳遞資料,子元件第一次呼叫資料的時候頁面渲染是正常的,當資料變化的時候,子元件的頁面渲染就失效了。問題判斷 通過一次次測試發現,第一次開啟子元件的時候頁面的渲染是正常的,後面開啟之後渲染就失效了。所以初步懷疑是第二次呼叫元件的時候沒有對資料進行渲染。解決方案一 當資...