全局loading

全局 loading 指的是页面刷新时出现的加载效果，通常是一个旋转的图标：

原理

由项目内置的 inject-app-loading 插件实现。源码位于 internal/vite-config/src/plugins/inject-app-loading，插件会在每个应用中注入全局 loading HTML。

关闭

如果你不需要全局 loading，可以在 .env 文件中关闭：

bash

VITE_INJECT_APP_LOADING=false

自定义

如果你想要自定义全局 loading，可以在应用目录下，与index.html同级，创建一个loading.html文件，插件会自动读取并注入。这个html可以自行定义样式和动画。

项目内置的默认模板位于 internal/vite-config/src/plugins/inject-app-loading/default-loading.html，可作为自定义参考。

TIP

你可以使用跟index.html一样的语法，比如VITE_APP_TITLE变量，来获取应用的标题。
必须保证有一个id="__app-loading__"的元素。
给id="__app-loading__"的元素，加一个 hidden class。
必须保证有一个style[data-app-loading="inject-css"]的元素。

html

<style data-app-loading="inject-css">
  #__app-loading__.hidden {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: all 1s ease-out;
  }
  /* ... */
</style>
<div id="__app-loading__">
  <!-- ... -->
  <div class="title">%VITE_APP_TITLE%</div>
</div>