Vue解决vue build打包之后首页白屏给加载中提示

您可以使用Vue的异步组件和路由懒加载来解决打包后首页白屏的问题，并给加载中添加提示。

首先，确保您已经安装了Vue Router插件。然后，在路由配置中使用`import()`函数来异步加载组件。例如：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
  },
  // 其他路由配置...
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

在上面的代码中，`import()`函数将组件异步加载，`webpackChunkName`参数用于指定生成的代码块的名称。

接下来，在你的根组件（通常是App.vue）中添加一个加载中的提示。你可以使用Vue的`v-if`和`v-else`来控制加载中的提示是否显示。例如：

<template>
  <div>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    };
  },
  mounted() {
    // 模拟异步加载延迟
    setTimeout(() => {
      this.loading = false;
    }, 2000); // 延迟2秒
  }
};
</script>

在上面的代码中，`loading`变量控制加载中提示的显示与隐藏。在`mounted`钩子中，您可以使用异步操作（例如axios请求）来加载页面内容，并在加载完成后将`loading`设置为`false`。

这样，在打包后，当用户访问首页时，会先显示加载中的提示，直到页面内容加载完成后再显示页面内容，避免了首页白屏的问题。