nuxt3 自定义初始化页面时的加载动画

https://stackoverflow.com/questions/76771545/nuxt-3-where-to-customize-spa-loading-svg/76771704#76771704
https://stackoverflow.com/questions/76693564/how-do-i-disable-nuxt3-default-loading-indicator
https://stackoverflow.com/questions/76810503/is-it-possible-to-replace-nuxt-3-default-page-loading-animation

 spaLoadingTemplate: 'spa-loading-template.html',

当通过在配置中提供ssr:false将应用程序置于非ssr模式时，nuxt提供了默认的绿色SVG。我知道有一种方法可以在nuxt 2中使用一些内置的spinkit微调器，但我找不到一种方法来更改/替换这个SVG图形，例如我的徽标。有人能给我指正确的方向吗？

到处搜索，但代码似乎是内置的
您可以通过调用 nuxt.config 中 HTML 文件的文件名来自定义 SPA 加载屏幕模板。确保禁用 SSR 才能使其正常工作。
nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: false,
  spaLoadingTemplate: 'spa-loading-template.html',
});

在根目录中创建一个名为 spa-loading-template.html 的文件。这将是您的加载屏幕模板。 例如spa-loading-template.html

<style>
  .loading {
      background-color: #1e293b;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color:#15803d;
  }
  
  #spinner {
      width: 30px;
  }
  
  #spinner #sGD stop {
      stop-color: #16a34a;
  }
  
  #spinner .path-solid {
      stroke: #16a34a;
  }
  </style>
  <div class="loading">
          <svg version="1.1" viewBox="0 0 64 64" width="1em" xmlns="http://www.w3.org/2000/svg" id="spinner">
          <circle class="path-gradient" cx="32" cy="32" r="28" fill="none" stroke="url(#sGD)" stroke-width="8" />
          <path class="path-solid" d="M 32,4 A 28 28,0,0,0,32,60" fill="none" stroke="#000" stroke-width="8" stroke-linecap="round"/>
          
          <defs>
              <linearGradient id="sGD" gradientUnits="userSpaceOnUse" x1="32" y1="0" x2="32" y2="64">
                  <stop stop-color="#000" offset="0.1" stop-opacity="0" class="stop1"></stop>
                  <stop stop-color="#000" offset=".9" stop-opacity="1" class="stop2"></stop>
              </linearGradient>
          </defs>
          
          <animateTransform
              values="0,0,0;360,0,0" 
              attributeName="transform" 
              type="rotate" 
              repeatCount="indefinite" 
              dur="750ms">
          </animateTransform>
          </svg>
          </div>
      </div>
  </div>

image.png

通过遵循这些设置，您应该能够看到自定义加载屏幕。