Vue预渲染打包后,刷新会闪现首页的解决

vue预渲染后打包上线后,刷新当前页面后会出现首页突然展示,随即再回到当前路由下页面的情况。

这是因为在使用prerender-spa-plugin预渲染后,配置是对应的路由会生成index.html文件。因为配置预渲染需要将路由配置为history模式,在Nginx或者apache配置里,会将url重定向到根目录的index.html,所以在页面还没有被vue给接管的时候,刷新的一瞬间是会展示预渲染时候生成的根目录的index.html的内容。

 可以看到生成的index.html文件

上图是通过预渲染生成的index.html文件的 内容。刷新时候展示的就是这个。

解决:

我选择了一种比较笨的解决方案,就是在默认把根目录的index.html中id=app的元素设置为display:none。

然后在app.vue被挂载后,将该属性设置为block,即可。因为在app.vue被挂载后说明页面肯定已经被vue给接管。所以可行。

 

到此就结束了,如果刷新过程中出现白屏,可以在index.hml里面写一个loading动画,优化体验 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章