用vue-cli打包创建的webapp工程,index.html中不包含dom内容结构,都是在js中,如下图
仅仅包含<div id='app'></div>
这样的话,就需要等待依赖的3个js加载完成才可以显示页面,之前页面是空白的,对于移动端来讲非常不友好,下载js需要时间,针对这个问题查询了许多资料,最终找到了一个解决的方法:
vue文档中有这样一段预渲染的介绍,点击去看看prerender-spa-plugin
根据介绍设置
1,npm install prerender-spa-plugin
2,设置webpack.conf.js
3,设置exports plugin
4,npm run build
查看index.html
不再是之前的一个空div了,首页内容展现在index.html中了,这样就可以解决空白的问题了!!
和大家分享一下