码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 使用 prerender-spa-plugin 添加loading

时间:2018-08-10 23:21:44      阅读:340      评论:0      收藏:0      [点我收藏+]

标签:vue 使用   env   add   turn   path   tom   代码   listener   cat   

主要配置代码:

 

        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, ‘dist‘),
          routes: [‘/‘, ‘/introduction‘, ‘/application‘, ‘/download‘],
          postProcess: function (context) {
            context.html = context.html.replace(
              /<\/head>/i,
              `<script>
                document.addEventListener("DOMContentLoaded", function (event) {
                  document.getElementById(‘landing‘).style.display = ‘none‘;
                })
              </script>
              </head>`
            )
            return context
          }
        }),

 

 

html

 

  <div id="landing">
    <img id="landing-img" src="/loading-bars.svg" alt="landing">
  </div>

 

css

 

    #landing {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      z-index: 3000;
    }

    #landing-img {
      position: absolute;
      width: 60px;
      left: 50%;
      top: 40%;
      margin-left: -20px;
    }

 

main.js

 

new Vue({
  router,
  store,
  render: h => h(App),
  mounted () {
    if (process.env.NODE_ENV !== ‘production‘) {
      document.getElementById(‘landing‘).style.display = ‘none‘
    }
  }
}).$mount(‘#app‘)

 

Vue 使用 prerender-spa-plugin 添加loading

标签:vue 使用   env   add   turn   path   tom   代码   listener   cat   

原文地址:https://www.cnblogs.com/savokiss/p/9457176.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!