ElemeFE / ElemeFE/page-skeleton-webpack-plugin
不知道这个对路由的配置有什么要求
- Dominant language
- JavaScript
- Stars
- 2.8k
- Forks
- 388
- PR merge metrics
- No merged PRs in 30d
Description
### Description
1.我的路由配置大概是这样的,有个组件mobileLayout专门写了一些移动端的样式,作为嵌套路由
移动端都在这个组件里
```javascript
{
path: '',
component: mobileLayout,
children: [
{
path: 'index',
name: '列表页',
component: () =>
import ('@/views/home/index'),
meta: {
title: '大视VLOG',
icon: ''
},
},
{
path: 'download',
name: '下载页',
component: () =>
import ('@/views/download/index'),
meta: {
title: '大视VLOG',
icon: ''
},
},
{
path: 'play',
name: '视频详情',
meta: {
title: '大视VLOG'
},
props: (route) => ({
query: route.query.videoId
}),
component: () =>
import ('@/views/play/index')
},
{
path: 'userCenter',
name: '个人主页',
meta: {
title: '大视VLOG'
},
props: (route) => ({
query: route.query.userId
}),
component: () =>
import ('@/views/userCenter/index')
}
]
}
```
什么也生成不出来,看了弹出的页面控制台报错了
[报错图](http://zhongjingdashi.oss-cn-beijing.aliyuncs.com//mobile/images/photo/20180801103650.png)
2.如果我只配置很简单的路由,就可以生成了,但生成的骨架元素尺寸很有问题,并且高度填不满页面。
```javascript
{
path: '',
name: 'root',
component: mobileLayout,
children: [{
path: 'index',
name: '列表页',
component: () =>
import ('@/views/home/index'),
meta: {
title: '大视VLOG',
icon: ''
},
}]
}
```
请见图
[尺寸错误](http://zhongjingdashi.oss-cn-beijing.aliyuncs.com//mobile/images/photo/20180801103637.png)
谢谢
### Plugin configration
for example:
```javascript
new SkeletonPlugin({
pathname: path.resolve(__dirname, './shell'), // the path to store shell file
staticDir: path.resolve(__dirname, './dist'), // the same as the `output.path`
routes: ['/', '/index','/play','/userCenter'], // Which routes you want to generate skeleton screen
defer:20000,
device:'iPhone X'
}),
```
### Versions
- Page Skeleton:0.10.12
- Webpack:3.6.0
Contributor guide
Research direction
Start by reproducing the two configurations in the issue with Page Skeleton 0.10.12 and Webpack 3.6.0, using the listed routes, device, and output paths. Inspect the linked console-error and sizing screenshots, then determine why the nested routes fail and why the generated skeleton dimensions do not fill the page; done means both configurations generate correctly sized output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, webpack
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100