vue3项目之VUE-SSR 第一次改造方案

VUE-SSR 第一次改造方案

实现的效果是页面最开始有服务端渲染的 html 文档呈现到页面，后面再实现客户端渲染进行页面优化

这次改造服务端渲染的 html 数据都是静态的

5.1 SSR 服务的基本框架

Vite + Vue 3+ TS + SSR 的基本原理、构建步骤、目录结构，实现步骤就是先将页面的静态文件在 HTML 中进行展示，随后再渲染 vue 构建好的页面。即先服务端渲染再客户端渲染

• 基本原理
  • 通过 Vue 的 server - renderer 模块将 Vue 应用实例转换成一段纯文本的 HTML 字符串
  • 通过 Nodejs 创建一个静态 Web 服务器
  • 通过 Nodejs 将服务端所转换好的 HTML 结构发送到浏览器端进行展示

5.2 SSR 服务开发环境实现

5.2.1 报错代码处理总结

• ElementPlus 不能设置按需引入了！

• 某些 ElementPlus 组件比如（el-menu）对SSR支持不全面、不兼容，会报错 Hydration completed but contains mismatches

• router 里面的 history 必须换成 import.meta.env.SSR ? createMemoryHistory() : createWebHistory()

• **不允许在初始化（页面首次加载）**的时候使用到 indexedDB、localStore 的 api！！！可通过在 entry-client.ts 里面实现功能！

• 进度条、el-message 等消息组件无法在服务端加载，所以尽量避免首次加载使用到！