vue自动生成skeleton屏

步骤一

npm i page-skeleton-webpack-plugin

创建 vue.config.js

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 === 'production') {
      config.plugin('html').tap(args=> {
        args[0].minify.removeComments = false
        return args
      })
    }

  },
};

运行项目

npm run serve

报错解决办法Error:

listen EADDRINUSE: address already in use :::8989
修改node_modules/page-skeleton-webpack-plugin/src/skeletonPlugin.js

image.png

生成骨架屏

在浏览器打开页面，通过 Ctrl|Cmd + enter 呼出插件交互界面，或者在在浏览器的 JavaScript 控制台内输入toggleBar 呼出交互界面。

image.png

在浏览器控制台输入toggleBar 点击按钮生成 需要一小会时间

骨架屏生成好后，会跳转到以下页面

image.png

保存骨架屏后，会在项目中的shell目录下生成相关骨架页面

image.png

查看骨架屏效果

npm run build

打包出现了报 post:8989 试下先停止 本地服务(npm run serve) 就可以了

使用slow3G可以很容易地观察到效果

image.png

将rem的设置放在页面head中