之前 Webpack 项目经常会用到预渲染，现在团队都开始用 Vite 了，所以弄一个基于 Vite 的 Vue 3 预渲染 demo 可以参考。
预渲染和静态生成器比较接近，也可以参考我的 SSG 博客 用 vite-ssg 和 vite-plugin-pages 来处理。
不过 Vite 本身对预渲染也提供了原生的支持，简单的预渲染可以自己写写代码来改造实现。
HTML 部分
项目根目录下 index.html 里需要追加至少两条资源注入位置的注释：
| 注释语句 | 作用 | 是否必须 |
|---|---|---|
<!--preload-links--> | 预加载资源 | 是 |
<!--app-html--> | 页面内容 | 是 |
<!--title--> | SEO 优化：写入标题 | 否 |
<!--description--> | SEO 优化：写入描述 | 否 |
<!--keywords--> | SEO 优化：写入关键词 | 否 |
并把入口文件改成 entry-client.ts ，原来的 main.ts 会作为客户端和服务端启动时的引用。
完整代码如下（源码：index.html ）：
其中除了两条必须的注释语句外，可选的部分见 SEO 优化 。
入口文件
普通项目是使用 src/main.ts 作为入口文件，需要改造成两个入口：
| 注释语句 | 作用 | 源码 |
|---|---|---|
entry-client.ts | 客户端入口 | 查看源码 |
entry-server.ts | 服务端入口 | 查看源码 |
而原来的 main.ts 只作为入口函数导出，详见源码： main.ts
路由
不再需要手动配置路由结构了，改造后直接读取 src/views 的路由组件来生成页面路由。
详见源码： router
SEO 优化
做预渲染为的就是做 SEO ，所以需要自己提前配置好 SEO 的 TKD 三大要素，这里我也是放在 src/router 目录下一起管理了。
实现逻辑见 预渲染 部分的说明，这里是以最终每个页面的相对路径来判断要写入的 TKD 信息的。
详见源码： seo
预渲染
scripts/prerender.ts 这个文件是执行预渲染行为，可以按照路由目录的结构渲染为静态 HTML 文件。
运行 npm run generate ，可以把 dist/static 作为静态站点部署。
当然我也封装了 npm run build 一次性编译所有平台（ Client / Server / Static ）。
详见： package.json 里的 scripts 部分。
常见问题
改造过程中遇到的几个问题：
水合节点不匹配
控制台报错：
警告来自于 hydration.ts ，一般可以无视……
当然也可以了解更多的知识点： understand-and-solve-hydration-errors-in-vue-js
路由跳转
控制台报错：
需要使用 <Suspense /> 标签来包裹路由视图，详见 Suspense 。