Vue预渲染打包后,刷新会闪现首页的解决
vue预渲染后打包上线后,刷新当前页面后会出现首页突然展示,随即再回到当前路由下页面的情况。这是因为在使用prerender-spa-plugin预渲染后,配置是对应的路由会生成index.html文件。因为配置预渲染需要将路由配置为history模式,在Nginx或者apache配置里,会将url重定向到根目录的index.html,所以在页面还没有被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动画,优化体验
更多推荐
已为社区贡献1条内容
所有评论(0)