vue-cli3 的vue-skeleton-webpack-plugin使用

index.html

  
  
  
  
  
  
  <% for (var jsFilePath of htmlWebpackPlugin.files.js) { %>
  
  <% } %>
  <% for (var cssFilePath of htmlWebpackPlugin.files.css) { %>
  
  
  <% } %>
  
  
  



  
  

  
  

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

const app = new Vue({
  components: {
    App
  },
  router,
  render: h => h(App)
});

window.mountApp = () => {
  app.$mount("#app");
};
if (process.env.NODE_ENV === "development" || window.STYLE_READY) {
  window.mountApp();
}

skeleton.js

import Vue from "vue";
import skeletonWallet from "./skeletonWallet.vue";
//import skeletonWithdraw from "./skeletonWithdraw.vue";

export default new Vue({
  components: {
    skeletonWallet,
    //skeletonWithdraw
  },
  template: `
       

           
           
       
    `
});

skeletonWallet.vue

vue.config.js

const SkeletonWebpackPlugin = require("vue-skeleton-webpack-plugin");
module.exports = {
//此插件需要css分离
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  configureWebpack: config => {
  // 骨架屏
    config.plugins.push(
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.join(__dirname, "./src/skeleton.js")
          }
        },
        minimize: true,
        quiet: true,
        router: {
          mode: "hash",
          routes: [
            {
              path: "/wallet", //和router.js中的路径一样就行
              skeletonId: "skeleton1" //之前的id
            },
           // {
           //   path: "/withdraw",
           //  skeletonId: "skeleton2"
           // }
          ]
        }
      })
    );
  }
}