vue-cli3 + 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: ['/','/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:

listen EADDRINUSE: address already in use :::8989
修復vue-cli3.0項目端口被佔用的bug

// 修改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 呼出交互界面。

骨架屏生成中，須要一小會兒時間

骨架屏生成好後，會跳轉到如下頁面

保存骨架屏後，會在項目中的shell目錄下生成相關骨架頁面

查看骨架屏效果

編譯項目

npm run build

在nginx下啓動dist目錄後，訪問頁面查看效果。使用slow3G能夠很容易地觀察到效果