0.1.3 • Published 4 years ago
webpack-dps-spa-plugin v0.1.3
webpack-dps-spa-plugin
单页面多路由骨架屏插件
AutoDpsPlugin
Kind: global class
new AutoDpsPlugin(options)
自动渲染骨架屏插件
| Param | Description |
|---|---|
| options | 插件配置 |
| options.server | 渲染骨架屏本地服务配置 |
| options.server.port | 本地服务端口，默认从8000开始寻找 |
| options.server.proxy | 本地服务反向代理配置与devServer.proxy一致，如果为value为函数则为中间件，否则为http-proxy-middleware |
| options.insertEl | 骨架屏元素插入到html的父标签，默认 #skeleton |
| options.routeMode | 路由模式，默认 history |
| options.limit | 同时渲染骨架屏路由数量，默认 5 |
| options.staticDir | 打包输出目录（index.html输出目录），默认 项目根目录下的dist目录 |
| options.enableAutoSkeletonRoutes | 是否采用自动配置路由，必须使用 auto-routing 插件 |
| options.skeletonRoutes | 需要渲染的骨架屏路由配置，enableAutoSkeletonRoutes 为 false 可用 |
| options.await | 等待时间（ms），默认0 |
options.skeletonRoutes
| Param | Description |
|---|---|
| name | 必须和路由定义的name一致 |
| path | 匹配当前路由的正则 |
| pathname | 访问路由的path地址，例如: /mn/demo |
| skeletonId | 骨架屏路由ID，唯一即可 |
dps.config.js 额外参数
| Param | Description |
|---|---|
| inject | 注入window变量值 |
| injectProperty | 注入window变量属性名 |
| launch | puppeteer 启动参数配置 |
使用
webpack chainWebpack 添加插件
config.plugin('AutoDpsPlugin')
.use(AutoDpsPlugin, [{
enableAutoSkeletonRoutes: true,
limit: 5,
server: {}
}]);enableAutoSkeletonRoutes
添加 vue-cli-auto-routing 插件,在路由页面配置<route>块
<route>
{
"meta": {
"skeleton": true
}
}
</route>or
<route>
{
"meta": {
"skeleton": {
"name": "home",
"path": /^\/mn\/home/
"pathname": "/mn/home",
"skeletonId": "home"
}
}
}
</route>自定义返回数据
dpsServer: {
proxy: {
'^/app-gateway/demo': (req, res) => {
res.json({code: 200, data: {}});
res.end();
}
}
}