方式一 首屏加载，在index.html根文件下新增loading页面和样式

将内容写在<div id="app"></div>内，当远程静态资源加载完成后，app.mount('#app')挂载完成后替换原有的静态资源

<div id="Nloading">
      <div class="loading-contain">
        <img src="/loading.png" alt="loading" />
        <div class="loading-text">
          页面加载中，请稍等！
        </div>
        <div class="loading-loader">
          <div class='sk-three-bounce'>
            <div class='sk-bounce-1 sk-child'></div>
            <div class='sk-bounce-2 sk-child'></div>
            <div class='sk-bounce-3 sk-child'></div>
            <div class='sk-bounce-4 sk-child'></div>
            <div class='sk-bounce-5 sk-child'></div>
            <div class='sk-bounce-6 sk-child'></div>
          </div>
        </div>
      </div>
    </div>
     <style>
      #Nloading {
        width: 100%;
        height: 100vh;
        background-color: #F6F8FE;
      }

      #Nloading .loading-contain {
        position: absolute;
        top: 45%;
        left: 50%;
        -webkit-transform: translate3d(-50%, -45%, 0);
        transform: translate3d(-50%, -45%, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #F6F8FE;
      }

      #Nloading .loading-contain .loading-loader {
        padding-top: 15px;
      }
      #Nloading .loading-contain .loading-loader img {
        width: 297px;
        height: 256px;
      }
      #Nloading .loading-contain img {
        width: 297px;
        height: 256px;
      }

      #Nloading .loading-contain .loading-text {
        padding-top: 15px;
      }
    </style>

方式二 路由跳转 将loading页面以插件的形式挂载到vue的原型上

在路由跳转页面获取该项目实例，用实例上的挂载的loading页面属性去控制loading页面是否展示

import { createApp } from 'vue'
const instance = createApp(App)

instance.use(Loading)

type Lod = {
    show: () => void,
    hide: () => void
 }

// // 编写ts loading声明文件放置报错和提示
declare module '@vue/runtime-core' {
    export interface ComponentCustomProperties {
        $loading: Lod
    }
 }
 
 // 在路由跳转前
  instance?.config?.globalProperties?.$loading.show()
  //在路由跳转后
  instance?.config?.globalProperties?.$loading.hide()

loading页面

<template>
    <div id="Nloading" v-if="isShow">
        <div class="loading-contain">
            <img :src="loading" />
            <div class="loading-text">
                页面加载中，请稍等！
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    name: 'smallLoading'
})
</script>

<script setup lang="ts">
import { ref } from "vue"
const loading = new URL('@/assets/loading.png', import.meta.url).href

let isShow = ref(false)

const show = () => {
    isShow.value = true
}
const hide = () => {
    isShow.value = false
}
defineExpose({
    isShow,
    show,
    hide
})
</script>
<style lang="less" scope>
#Nloading {
    position: absolute;
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 100%;
    height: 100%;
    background-color: #F6F8FE;
    inset: 0;

    .loading-contain {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        img {
            // position: absolute;
            // top: 50%;
            // left: 50%;
            // transform: translate3d(-50%, -50%, 0);
            width: 297px;
            height: 256px;
        }

        .loading-text {
            padding: 15px;
        }
    }

}
</style>