项目运行，骨架屏还是一片空白

ElemeFE / page-skeleton-webpack-plugin

Webpack plugin to generate the skeleton page automatically

MIT License

2.8k stars 393 forks source link

Open liusheng-zhainanya opened 3 years ago

liusheng-zhainanya commented 3 years ago

骨架页面预览的控制台 Object /person/0: Object html: (...) qrCode: (...) skeletonPageUrl: (...) url: (...)

而且控制台还报错了，而且右上角默认是 / 'html' of undefined 'ur'l' of undefined 通过打开控制台复制对象.skeletonPageUrl 然后一个大的loading旋转，样式也不对，差太多了。

猜想： /person/0 动态路由不可以? 页面结构复杂/ 组件嵌套过多？

buhanqiu commented 3 years ago

我也是一样的问题现在还没解决

Nodreame commented 3 years ago

解决方法：yarn dev 界面预览成功后，Ctrl|Cmd + enter 就可以看到页面上出现 Browser open another page... 的按钮，点击即可
原因：单纯打开骨架屏预览控制台并不会触发"骨架屏生成开始操作"，按照上面方法在命令行可以看到"begin to generator skeleton screen", 此时开始执行生成骨架屏
官方文档地址：https://github.com/ElemeFE/page-skeleton-webpack-plugin/blob/master/docs/i18n/zh_cn.md

habc0807 commented 2 years ago

我也是一样的问题现在还没解决

官网第三步，可以解决👇 第三步：界面操作生成、写入骨架页面在开发页面中通过 Ctrl|Cmd + enter 呼出插件交互界面，或者在在浏览器的 JavaScript 控制台内输入toggleBar 呼出交互界面。

点击交互界面中的按钮，进行骨架页面的预览，这一过程可能会花费 20s 左右时间，当插件准备好骨架页面后，会自动通过浏览器打开预览页面，如下图。