骨架dom是插入到app中，但是对应骨架的display并没有变成block

[ZhengXiaowei]

以下是配置：

// vue.config.js
configureWebpack: {
    plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.join(__dirname, "./src/skeletons/skeleton.config.js")
          },
          router: [
            {
              mode: "history",
              routes: [
                {
                  path: "/",
                  skeletonId: "homeSkeleton"
                },
                {
                  path: /^\/detail/,
                  skeletonId: "detailSkeleton"
                }
              ]
            }
          ],
          minimize: true,
          quiet: true
        }
      })
    ]
  }

// skeleton.config.js
import Vue from "vue";

import HomeSkeleton from "./skes/HomeSkeleton.vue";
import DetailSkeleton from "./skes/DetailSkeleton.vue";

export default new Vue({
  components: {
    HomeSkeleton,
    DetailSkeleton
  },
  template: `
    <div>
      <home-skeleton id="homeSkeleton" style="display: none"></home-skeleton>
      <detail-skeleton id="detailSkeleton" style="display: none"></detail-skeleton>
    </div>
  `
});

是不是哪里少了什么

[ZhengXiaowei]

已解决

[qza6268963]

请问下您是如何解决的？

[ZhengXiaowei]

@qza6268963 我能说我忘了么。。例子项目没找到，如果你不介意的话，你可以把你的例子项目发我一份 我看看。。

[qza6268963]

@ZhengXiaowei

// vue.config.js配置    
 config.plugins.push(
    new SkeletonWebpackPlugin({
      webpackConfig: {
          entry: {
              app: resolve('./src/skeleton.js')
          }
      },
      quiet: true,
      minimize: true,
      router: {
        mode: 'history',
        routes: [
          {
            path: '/^\/home/',
            skeletonId: 'skeleton1'
          },
          {
            path: '/kol/filter',
            skeletonId: 'skeleton3'
          }
        ]
      }
    })
  ) 

// skeleton.config.js配置
import Vue from 'vue'
import Skeleton from './Skeleton'

export default new Vue({
components: {
Skeleton
},
render: h => h(Skeleton)
})

// 骨架屏模板
<template>
    <div>
      <div :id="'skeleton1'" style="display:none;">测试skeleton1</div>
      <div :id="'skeleton3'" style="display:none;">测试skeleton3</div>
    </div>
</template>

<script>
export default {
  name: 'skeleton'
}
</script>

这配置跟您的应该是差不多的，骨架屏组件那个试过用多种方式实现，但是结果依然不行。如果不写display，它们就会全部显示，如果写了，又不会根据路由去设为display：block，是我的配置缺了哪一项吗

[qza6268963]

@ZhengXiaowei 解决了，就是配置有问题，之前我用的配置是单页面多路由的配置，他的配置是

app: resolve('./src/entry-skeleton.js')

但是在cli3中用这个配置是无法根据路由进行骨架屏渲染的，我们需要改成

app: path.join(__dirname, './src/skeleton.js')

那现在的配置就是这样的

const path = require('path');
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

module.exports = {
  configureWebpack: (config)=>{
    // console.log(config);
    config.plugins.push(new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/skeleton.js'),
        },
      },
      minimize: true,
      quiet: true,
      router: {
        mode: 'history',
        routes: [
          {
            path: '/^\/home/',
            skeletonId: 'skeleton1'
          },
          {
            path: '/kol/filter',
            skeletonId: 'skeleton3'
          }
        ]
    }
    }))

  },
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },

};