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>
通过遵循这些设置,您应该能够看到自定义加载屏幕。