在vue首页骨架屏vue-skeleton-webpack-plugin插件的使用的基础上进行修改

1.在 webpack.dev.conf.js和webpack.prod.conf.js中plugins的配置修改为

        new SkeletonWebpackPlugin({
            webpackConfig: {
                entry: {
                    app: resolve('./src/entry-skeleton.js')
                },
            },
            router: {
              //和项目路由中的模式保持一致哦
                mode: 'history',
                routes: [{
                        path: '/',
                        skeletonId: 'skeleton1'
                    },
                    {
                        path: '/index2',
                        skeletonId: 'skeleton1'
                    },
                ]
            }
        })

2.骨架屏组件的入口文件src/entry-skeleton.js文件修改为

import Vue from 'vue'
// 创建的骨架屏 Vue 实例
import skeleton1 from './skeleton';
import skeleton2 from './skeleton';
export default new Vue({
    components: {
        skeleton1,
        skeleton2
    },
    template: ` <div>
            <skeleton1 id="skeleton1" style="display:none"/>
            <skeleton2 id="skeleton2" style="display:none"/>
        </div>`
});

go go go