vue-cli3 + page-skeleton-webpack-plugin 生成骨架屏

时间 2021-02-17

标签 html vue node webpack nginx git github web vue-cli shell 栏目 HTML 繁體版

原文原文链接

建立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: ['/','/about'], // 将须要生成骨架屏的路由添加到数组中
      })
    ],
  },
  chainWebpack: (config) => {   // 解决vue-cli3脚手架建立的项目压缩html 干掉<!-- shell -->致使骨架屏不生效
    if (process.env.NODE_ENV !== 'development') {
      config.plugin('html').tap(opts => {
        opts[0].minify.removeComments = false
        return opts
      })
    }

  },
};

安装 page-skeleton-webpack-plugin

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

运行项目

npm run serve

报错解决办法Error: html

listen EADDRINUSE: address already in use :::8989
修复vue-cli3.0项目端口被占用的bugvue

// 修改node_modules/page-skeleton-webpack-plugin/src/skeletonPlugin.js
if (!this.server) {
    const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign
    server.listen().catch(err => server.log.warn(err))
  }

生成骨架屏

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

骨架屏生成中，须要一小会儿时间
webpack

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

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

查看骨架屏效果

编译项目git

npm run build

在nginx下启动dist目录后，访问页面查看效果。使用slow3G能够很容易地观察到效果
github