spa-loading-template.html
spa-loading-template.html 文件用于定义客户端渲染页面初始化期间显示的加载界面。
Geprüfte Übersetzung ·0 % geprüft
当页面以 ssr: false 渲染时（可以在 nuxt.config 中全局设置，也可以通过 routeRules 为特定路由设置），服务器会返回一个不含服务端渲染应用内容的 HTML 框架。在 JavaScript bundle 下载完成、Nuxt 插件运行完毕且首个页面渲染完成之前，用户看不到页面内容。
你可以添加 app/spa-loading-template.html 文件来填补这段等待时间。文件内容会直接插入服务器返回的 HTML 中，因此 Nuxt 客户端 bundle 加载前就能显示。
app/spa-loading-template.html
<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
<div class="loader"></div>
<style>
.loader {
position: fixed;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 -12px;
border: 2px solid #efefef;
border-top-color: #000;
border-radius: 50%;
animation: loader 600ms linear infinite;
}
@keyframes loader {
to { transform: rotate(360deg); }
}
</style>该文件是独立于 Vue 渲染的纯 HTML，因此不能在其中使用 Vue 组件或自动导入。请在此文件中直接写入加载界面所需的样式，不要依赖应用的样式表。
该文件只负责客户端渲染页面的首次加载。若要在页面切换时显示加载状态，请使用
<NuxtLoadingIndicator> 组件。移除时机
默认情况下，加载模板会渲染在 Nuxt 应用根元素旁边，而不是根元素内部：
<div id="__nuxt"></div>
<div id="__nuxt-loader"><!-- spa-loading-template.html --></div>加载模板会一直显示，直到首个页面（包括页面中的异步 setup）准备渲染，随后被移除。这可以避免加载画面与页面之间出现白屏。你可以使用 app.spaLoaderTag 和 app.spaLoaderAttrs 自定义包装元素。Nuxt 会通过 id 移除该元素，因此修改 spaLoaderAttrs 时请保留 id。
你也可以将实验选项 spaLoadingTemplateLocation 设为 'within'，让模板渲染在应用根元素内部。这种情况下，Vue 挂载应用后模板就会立即移除，因此首个页面准备好渲染之前，屏幕可能会暂时空白。
配置
Nuxt 会在项目及各个 layer 的 app/ 目录（更准确地说，是 dir.app 指定的目录）中查找 spa-loading-template.html。
你可以通过 spaLoadingTemplate 选项修改此行为：
- 使用路径指定其他 HTML 文件。路径相对于
srcDir，默认值为app/。 - 设为
true，在找不到文件时使用 Nuxt 内置的加载界面。 - 设为
false，完全禁用加载模板。
export default defineNuxtConfig({
ssr: false,
spaLoadingTemplate: 'my-loader.html',
})