Vue3开发Telegram Web App：全页面加载周期Splash screen实现方案咨询

嗨，我来给你分享几个亲测有效的方案，完美解决你在Telegram Web App里Vue3加载前显示启动屏的问题——毕竟我之前做类似需求时也踩过v-cloak和Suspense的坑😂

方案一：纯HTML/CSS前置启动屏（覆盖最早期空白阶段） #

这是最直接的解决办法，你之前用v-cloak没覆盖到最早期空白，是因为它要等Vue实例挂载后才会隐藏，而在Vue的JS文件还没加载完成的那段时间，浏览器只会解析静态HTML。所以我们可以直接在index.html里写一个全屏的启动屏容器，放在Vue挂载的#app元素之前，让浏览器一加载页面就显示它，完全覆盖掉Telegram自带的底部进度条和空白页面。

代码示例：
在index.html中添加静态启动屏：

<!-- 前置启动屏，浏览器加载页面就会立即显示 -->
<div id="splash-screen" class="splash-container">
  <div class="splash-content">
    <!-- 这里替换成你的启动内容，比如品牌Logo、自定义加载动画 -->
    <h2>正在加载中...</h2>
    <div class="loader"></div>
  </div>
</div>

<!-- Vue挂载容器 -->
<div id="app"></div>

在全局CSS（建议写在index.html的<style>标签里，确保优先级最高）：

.splash-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #2c3e50; /* 替换成你的主题色 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999; /* 确保层级高于Telegram的默认进度条 */
  color: #fff;
}

/* 简单的旋转加载动画，可自定义 */
.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #fff;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: rotation 1s linear infinite;
  margin-top: 16px;
}

@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

最后在main.js中，等Vue实例完全挂载后隐藏启动屏（可以加个淡出动画让过渡更丝滑）：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

// 挂载完成后隐藏启动屏
const splashScreen = document.getElementById('splash-screen')
splashScreen.style.opacity = '0'
setTimeout(() => {
  splashScreen.style.display = 'none'
}, 500)

方案二：优化v-cloak的使用（覆盖Vue初始化阶段） #

你之前在body上用v-cloak没达到预期，大概率是样式优先级或者使用方式不对。我们可以把v-cloak和静态启动屏结合，确保Vue初始化过程中#app不会提前显示：

在全局CSS中优先添加：

[v-cloak] #app {
  display: none !important;
}

然后给#app加上v-cloak指令：

<div id="splash-screen">...</div>
<div id="app" v-cloak></div>

这样v-cloak会在Vue完成编译前一直隐藏#app，而静态启动屏持续显示，直到Vue挂载完成后再手动隐藏启动屏，完美衔接加载阶段。

方案三：Suspense适配异步组件/路由懒加载（覆盖后续内容加载阶段） #

如果你的App里有大量路由懒加载或者异步组件，Suspense其实是可以用的，但它只能覆盖Vue组件树加载的阶段，无法覆盖最开始的JS文件加载期，所以需要和前面的方案配合使用：

在App.vue中配置Suspense：

<template>
  <Suspense>
    <template #default>
      <RouterView />
    </template>
    <template #fallback>
      <!-- 路由懒加载时的过渡启动屏 -->
      <div class="splash-container">
        <h2>加载页面中...</h2>
        <div class="loader"></div>
      </div>
    </template>
  </Suspense>
</template>

总结 #

把三个方案组合起来，就能实现从页面开始加载到App完全可用的全周期启动屏：

• 最早期HTML/JS加载阶段：用纯静态启动屏（方案一）
• Vue初始化到挂载阶段：结合v-cloak优化（方案二）
• 路由/异步组件加载阶段：用Suspense的fallback（方案三）

这样就再也不会出现空白页面或者Telegram自带的进度条啦！

备注：内容来源于stack exchange，提问作者Jamon