如何在应用启动前在 Nuxt.js 中创建预加载/启动画面？答案

【问题标题】：How to create a Pre-Loading/ Splash Screen in Nuxt.js before the app starts?如何在应用启动前在 Nuxt.js 中创建预加载/启动画面？
【发布时间】：2021-01-20 01:16:14
【问题描述】：

我尝试在路由之间添加一个加载器，如 nuxt.js 文档中所示，但它不起作用。但我无法在应用启动前添加启动画面。

我的 components/loading.vue

中的代码 sn-p

<template>
  <div v-if="loading" class="loading-page">
    <p>Loading...</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start(){
      this.loading = true
    },
    finish(){
      this.loading = false
    }
  }
}
</script>

在 nuxt.js.config

export default {
...

loading: '~/components/loading.vue'
...
}

【问题讨论】：

标签： vue.js nuxt.js splash-screen nuxtjs

【解决方案1】：

据我所知，您不能将 Vue 组件用作 Nuxt 应用的加载指示器。
您将不得不创建一个 HTML 文档。此 HTML 文档不必有 <html>、<head> 或 <body>。它只需要是您想要显示的初始屏幕即可。

我是这样做的：

创建一个html文档~/assets/loading.html
将以下内容添加到nuxt.config.js 文件中。

loadingIndicator: {
  name: '~/assets/loading.html'
}

保存并重新加载您的页面，您现在应该有一个自定义加载指示器/启动屏幕。

示例 HTML 文件：
这是一个非常简单的文件，用于在加载 nuxt 应用程序时显示初始屏幕图像。

<div style="height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #004066; margin-left: -8px; margin-top: -8px; overflow: hidden;">
  <img width="90%" src="<%= options.img %>">
</div>

注意：
关注<%= options.img %>。我正在使用选项，可以在nuxt.config.js 中定义，只需向loadingIndicator 添加更多键即可，示例如下。

loadingIndicator: {
  name: '~/assets/loading.html',
  img: '/loading.gif'
}

注意 2：
当访问加载指示器中的图像等资产时，您必须将它们放在/static 文件夹中。

文档：https://nuxtjs.org/docs/2.x/features/loading#custom-indicators
官方例子：https://github.com/nuxt/nuxt.js/tree/dev/packages/vue-app/template/views/loading

【讨论】：

完美运行！