zoukankan      html  css  js  c++  java
  • 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')
  • 相关阅读:
    视图类
    基于前一天再补充
    多表与基表等概念
    模块与序列化
    vue简单实现购物车列表功能
    再顾vue
    再探vue
    iptables编辑
    python 字符串替换、正则查找替换
    Map的遍历
  • 原文地址:https://www.cnblogs.com/savokiss/p/9457176.html
Copyright © 2011-2022 走看看