实测vuecli3下骨架屏实现的几种方式

总参考

使用vue-skeleton-webpack-plugin

vuecli3配置
插件原理
官方示例

1. 安装插件：npm i vue-skeleton-webpack-plugin -D

• 在App.vue同级目录下创建Skeleton.vue 如下
  
• 继续同级目录下创建entry-skeleton.js 如下(这里需要注意下 最好写成template模板格式，而且给上id，他是通过querySelect来找的dom)
  
• Vue.config.js中配置插件
  

const path = require("path");
const SkeletonWebpackPlugin = require("vue-skeleton-webpack-plugin");

module.exports = {
  configureWebpack: config => {
    // 添加插件
    config.plugins.push(
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.join(__dirname, "./src/entry-skeleton.js")
          }
        },
        minimize: true,
        quiet: true,
        router:{
            mode:'hash',
            routes:[
                {
                    path:'/',
                    skeletonId:'skeleton1'
                },
                {
                    path:'/about',
                    skeletonId:'skeleton2'
                }
            ]
        }
      })
    );
  },
  // 配置css
  css: {
    // 是否使用css分离插件 extractTextPlugin
    extract: true,
    // 是否开启css sourcemap
    sourceMap: false,
    // 启用 CSS modules for all css / pre-processor files.
    requireModuleExtension: false
  }
};

总体原理：主要原理是利用vue-server-renderer 将 .vue格式的骨架屏文件处理成html和css字符串的功能，进而完成骨架屏的注入，打包出来可以看到。

在我实验的过程中 发现比如加载首页，请求完index.html时他会出现骨架屏

但是从首页跳到其他页面 是没有出现骨架屏的，除非我们在其他页刷新进来 他会加载我们配置的当前路由的骨架屏模板。

我们切换路由发现它只是router-view那块在替换：


所以并未加载我们的骨架屏模板，我个人感觉 骨架屏使用初衷就是解决首屏白屏时间过久问题，如果要想在路由中使用，此时按需加载js,css时需要我们自己写适合当前页面下的骨架屏组件。

饿了么首屏骨架屏方案

原理
插件文档

① 安装 page-skeleton-webpack-plugin和html-webpack-plugin（需要替换html指定位置模板，一般vuecli3起手已经安装了html-webpack-plugin故不需再安装）

② 修改webpack配置添加插件

const {SkeletonPlugin} = require('page-skeleton-webpack-plugin')
const path = require('path')

module.exports = {
    publicPath :'/',
    assetsDir:'static',
    configureWebpack:{
        plugins:[
            new SkeletonPlugin({
                pathname:path.resolve(__dirname,'./shell'), // 用来存储 shell 文件的地址
                staticDir:path.resolve(__dirname,'./dist'),
                routes:['/','/about'] // 将需要生成骨架屏的路由添加到数组中
            })
        ]
    },
    chainWebpack: config =>{
        if(process.env.NODE_ENV !== 'development'){
            config.plugin('html').tap(opts => {
                opts[0].minify.removeComments = false // 解决vue-cli3脚手架创建的项目压缩html 干掉导致骨架屏不生效
                return opts
            })
        }
    }
}

Vuecli3初始化的项目run serve后报端口冲突错？？？

如上添加一个if判断后 能正常启动
③ 控制台输入toggleBar 弹出编辑页


点击右边铅笔 来保存你所修改后的骨架屏样式，他会在根目录下创建一个shell文件夹：

④ nginx来作静态服务器发布，下载nginx 找到conf下的nginx.conf：


这里我将root 直接指定在我项目打包目录dist！！！

⑤ 这里有个比较坑的地方，在vue.config.js中publicPath我最开始设置的相对路径
PublicPath:’./’然后打包出来 开启nginx访问 首页没得问题，但是在路由其他页面刷新的时候会出现错误：“js报Uncaught SyntaxError: Unexpected token <”
报错解决1
报错解决2
将vue.config.js的publicPath改为“/”再打包 重启nginx。


同样，切换路由的时候 也不会出现骨架屏只是在第一次加载页面的时候 会根据路由来加载对应定制的骨架屏

总的来说对比了这两个方案：（同样是为了解决首页骨架屏白屏问题也就是第一次加载我spa的页面，不是精确到组件内的骨架屏）
① 饿了么插件零配置，不需要我们去关心骨架屏dom结构，但是他目前只支持history模式，也支持路由配置
② vue-skeleton-webpack-plugin这个插件需要我们自己去构建想要的骨架屏，如果业务变了需要改代码，它支持hash和history，也支持配置