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动画，优化体验