vue.js - 处理登陆页面首次登陆白屏的问题，有知道的怎么处理的么？

Question

vue项目可以单独让登录页面做SSR服务器渲染么 ，具体要怎么操作么？

没有思路

Answer 1

安装和配置 Vue SSR
路由拆分
编写服务端渲染入口

   import Login from '@/views/Login.vue';   import { createRouter, createWebHashHistory } from 'vue-router';   const router = createRouter({     history: createWebHashHistory(),     routes: [       // 其他非SSR路由...       { path: '/', component: () => import('@/views/Home.vue') },              // 登录页SSR路由       { path: '/login', component: Login, meta: { ssr: true } },     ],   });   // 在 SSR 渲染时检查路由元信息   function isSSRRoute(route) {     return route.meta && route.meta.ssr;   }   

   import { createApp } from './app';   import { createServerRenderer } from '@vue/server-renderer';   import { router } from '../router'; // 引入路由配置   export default createServerRenderer(async context => {     const { app, router: _router } = createApp();     // 根据请求路径决定是否进行SSR渲染     if (isSSRRoute(context.url.match(router.getMatchedComponents({ path: context.url })[0])) {       // 设置当前路由并执行服务器端渲染       _router.push(context.url);       await _router.isReady();     }     return renderToString(app);   });   

Answer 2

加一个loading， v-loading,等dom元素加载完再取消loading

Answer 3

可以在 index.html 中增加loading效果。比如说借鉴 ant-design-vue 中的 public/index.html 文件。