1.0 KiB
1.0 KiB
全局loading
全局 loading 指的是页面刷新时出现的加载效果,通常是一个旋转的图标:
原理
由 vite-plugin-inject-app-loading
插件实现,插件会在每个应用的注入一个全局的 loading html
。
关闭
如果你不需要全局 loading,可以在 .env
文件中关闭:
VITE_INJECT_APP_LOADING=false
自定义
如果你想要自定义全局 loading,可以在应用目录下,与index.html
同级,创建一个loading.html
文件,插件会自动读取并注入。这个html可以自行定义样式和动画。
::: tip
- 你可以使用跟
index.html
一样的语法,比如VITE_APP_TITLE
变量,来获取应用的标题。 - 必须保证有一个
id="__app-loading__"
的元素。 - 必须保证有一个
style[data-app-loading="inject-css"]
的元素。
<style data-app-loading="inject-css">
/* ... */
</style>
<div id="__app-loading__">
<!-- ... -->
<div class="title"><%= VITE_APP_TITLE %></div>
</div>