vue首页白屏
首页白屏是不只有vue才有,所有的单页面框架都会存在这里问题。为什么单页面会有这个问题呢?我们看普通的html项目都会有多个html而且每个html中都会直接有也页面的内容,浏览器拿到html数据直接解析显示,而在vue中只提供了一个入口。首页没有html需要通过js生成,产生时间差造成白屏,这就是首页白屏形成的原因:
<div id=app></div>
1
既然存在问题,那么就要想办法解决。在网上你可以找到很多解决方案,这里也提供几种可供选择,根据项目真实情况选择方案。
# 优化打包
减少app.js吧大小,优化代码结构,合理利用cdn
# 添加loading界面
在页面没有渲染前显示loading,
# 生成骨架、默认html模板
在<div id=app></div>中添加默认的内容或者通过页面内容生成骨架,或者直接使用你的html模板替换vue打包的模板
# 服务端渲染
在服务器端编写首页数据
上次更新: 2025/09/05, 8:09:00