實測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 幹掉<!-- shell -->導致骨架屏不生效
                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，也支持配置