Vue 使用 prerender-spa-plugin 添加loading

主要配置代码：

 

        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')