Nuxt.js 自定义加载器不会立即加载答案

【问题标题】：Nuxt.js custom loader not loading instantlyNuxt.js 自定义加载器不会立即加载
【发布时间】：2021-06-04 03:28:46
【问题描述】：

所以我的自定义加载器不会像瞬间加载那样立即加载，然后它在这里加载是我的网站，我的目标是加载我的自定义组件。 PS当我将ssr更改为false时它可以工作这是我的网站：https://micahkwaka.dev

export default {
  loading: '~/components/LoadingBar.vue',

  loadingIndicator: false,

  ssr: true,

  pageTransition: {
    name: 'my-page',
    mode: 'out-in'
  },

  // Target (https://go.nuxtjs.dev/config-target)
  target: 'static',
}

【问题讨论】：

这可能是你补液前的延迟。我怀疑你对此无能为力。
所以我对此无能为力？ @kissu

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

【解决方案1】：

编辑：这个加载器是当你有一个 SPA 时，在显示内容之前等待它加载。由于您将 Nuxt 用作通用应用程序（ssr + 客户端），因此您将首先拥有静态内容（在 JS 启动之前，因此您的动画）。因此，您可以使用静态 SVG/CSS 制作一个，但支持的 JS 加载器不是这里的解决方案。

最好的方法是禁用 JS 来测试最终结果。不过，我很确定如果您没有任何加载程序，Google 会给您一个更好的评价。您也许可以将它添加到您的页面转换中。

对于动画本身，从它开始，然后setTimeout 在 500 毫秒或类似时间后将其移除。有很多方法可以做到。但是您需要在页面的初始渲染中使用它（在 JS 水合之前）。

如果你愿意，为什么要将 loadingIndicator 设置为 false？

如果您想要自定义一个，请按照文档中的说明提供密钥路径：https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading-indicator/

【讨论】：