page-skeleton-webpack-plugin骨架屏的使用

1 下载依赖

npm install --save-dev page-skeleton-webpack-plugin

npm install --save-dev html-webpack-plugin

2 在vue.config.js里面如下配置

// 骨架屏开始
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
    // const path = require('path')
module.exports = {
    configureWebpack: {
        plugins: [
            new SkeletonPlugin({
                pathname: path.resolve(__dirname, './shell'), // 用来存储 shell 文件的地址
                staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同
                routes: ['/'], // 将需要生成骨架屏的路由添加到数组中
            })
        ],
    },
    chainWebpack: (config) => { // 解决vue-cli3脚手架创建的项目压缩html 干掉<!-- shell -->导致骨架屏不生效
        if (process.env.NODE_ENV !== 'development') {
            config.plugin('