Vue.js：如何在应用程序加载之前显示加载语句而不是白页答案

【问题标题】：Vue.js: How to show loading statement instead of white page before application loadsVue.js：如何在应用程序加载之前显示加载语句而不是白页
【发布时间】：2020-05-11 10:44:27
【问题描述】：

当打开一个新的 Vue.js 页面时，会出现一段时间的白色页面，直到整个应用程序加载完毕。我尝试了很多次，用传统的方式把loading语句放在前面，但问题是即使loading语句也需要一段时间来加载和出现，以替换白页。

<div id="app">
    <template>
  <div id="app">
    <v-app>
      <navbar></navbar>

      <v-content class="mx-sm-12 mt-8 mx-1">
        <router-view />
      </v-content>
    </v-app>
  </div>
</template>

<script>
import navbar from "./components/navbar";

export default {
  components: {
    navbar
  }
}
</script>

【问题讨论】：

你如何添加你的传统方式？
我想说你应该为你的模块使用延迟加载，这样它就不需要任何时间来加载应用程序，从而使加载语句过时，因为没有人会看到它。
嗨，艾哈迈德！你解决了你的问题吗？我试图在第一次初始加载期间向我的 Vue 应用程序添加动画。我可以看到图像，但动画不起作用。你想告诉我一些解决这个问题的技巧吗？

标签： javascript vue.js vue-component vue-router

【解决方案1】：

您的 html 将首先被下载并呈现。您应该在 index.html 中加载。

JS（Vue 构建文件）下载后，它将替换 index.html 中的<div id="app"></div>。

我通过这样的 index.html 解决了这个加载问题：

<html>
<head>
   ...
</head>
<body>
<div id="app">
    <div id="loading__container">
       <div>some animation and text to indicate loading...</div>
    </div>
</div>
<style>
#loading__container {
    // animation style
}
</style>
<script type='text/javascript'>
    var loading = document. getElementById("loading__container")
    // ... do things with the loading container
</script>
</body>
</html>

【讨论】：

谢谢你的想法，这就是我要找的
嗨印章！我试图在第一次初始加载期间向我的 Vue 应用程序添加动画。我可以看到图像，但动画不起作用。你想告诉我一些解决这个问题的技巧吗？

【解决方案2】：

HTML

<div id="app" v-cloak></div>

CSS：在 CSS 文件中添加以下样式

[v-cloak] > * { display:none } [v-cloak]::before { content: "Loading…" }

您可以使用动画 gif 而不是“加载”文本。

【讨论】：

完美！我正在寻找这个解决方案！