从0开始搭建一个 Vite2 Vue3 SSR 通用项目模版
目标：用 vite2 + vue3 + Ts 搭建一个开箱即用的最简 ssr 通用项目, 包含必要的 vuex vue-router asyncData header管理。
一 通过官方脚手架搭建一个 vue-ts 的 SPA 项目
首先安装 yarn 包管理工具：
创建一个简单的 vue-ts 项目：
浏览器打开 http://localhost:3000/ 一个最简单的 vue3 + typescript 的 SPA 单页应用就搭建好了。
二 对 SPA 单页应用，进行 ssr 渲染改造。
在 src 目录下添加两个入口文件
项目目录下 修改 index.html文件
新建node端web服务器入口文件（开发环境）： server-env.js ，官方推荐 express，安装node包： yarn add -D express
package.json文件 新增dev命令
终端运行 yarn dev, 浏览器打开：http://localhost:3000/ 网页右键“显示页面源码”、
生产环境打包，package.json新增 build 相关命令
新建 node 端web服务器入口文件（生产环境）： server.js ，个人选择 koa搭建生产环境服务器，安装 node 包：yarn add -D koa koa-static
终端运行： yarn preview，浏览器打开：http://localhost:3000。最简 ssr 改造完成。
三 安装生产上必备的 vue 全家桶： scss vuex vue-router
首先安装scss支持： yarn add -D sass.
安装vue-router 和 vuex : yarn add vuex@next vue-router@next vuex-router-sync@next
新建 src/store/index.ts 和 src/router/index.ts 两个文件
新建对应的 src/views/页面 Home.vue About.vue 404.vue, 略。
修改 entry-client.ts 和 entry-server.js文件，加入相应的 vuex 和 router
终端运行： yarn dev 查看开发环境效果。终端运行： yarn preview 查看生产环境效果。
第一阶段源码： https://github.com/damowangzhu/vite2-vue3-ssr_steps/tree/v1
四 服务端预取数据 asyncData
服务端预取数据采用 vue2的 asyncData 方式。
新建 vue-extend.d.ts 文件
在Home.vue 添加 asyncData，store里用 setTimeout 模拟异步请求。
修改entry-client.ts中路由守卫， router.beforeResolve( ) 相关。
修改entry-server.js中 render 函数。
终端运行 yarn dev查看效果, 服务端预取数据渲染正确，但devtools 有一个报错：Hydration completed but contains mismatches. 是客户端和服务端的 store 未同步
同步方式如下：
index.html 文件添加相应的 window.__INITIAL_STATE__ 标识
修改entry-server.js 的 render函数 返回 state
在 server-env.js 和 server.js 修改 html模版 注意 `' '`。
entry-client.ts 文件末添加 store.replaceState（）函数同步state。
在shims-vue.d.ts 添加 typescript支持
终端运行 yarn dev 和 yarn preview 查看效果。
这一阶段源码： https://github.com/damowangzhu/vite2-vue3-ssr_steps/tree/v2
五 Head管理，ssr for SEO
以 title 为例，description 和 keywords 雷同。
在 src/router/indext.ts 写入 meta 信息
在index.html文件添加 title 标记
在server.js 和 server-env.js 修改模版
在entry-client.ts 文件做个前端路由跳转兼容
六 增加配置文件，开发环境和生产环境
项目目录下新建 .env.development 和 .env.production 文件
修改 vite.config.ts 文件, 配置文件通过 loadEnv 获取.env files 环境变量,
如果静态资源要发布CDN，可设置 例如： VITE_ASSET_URL=https://cdn.domain.com/
程序内部通过
七 代码格式化和 typescript 类型检查
官方推荐 Vscode + Volar, 通过 ide 的插件做类型检查等
Vscode安装 volar 和 Prettier 插件, 新建 .prettierrc.js 文件 , Vscode默认格式化选择 prettier
修改 ts.config.json 增加两条验证规则。
终端运行 yarn dev 和 yarn preview 查看效果。
若生产环境编译需要Ts类型检查 可通过 vue-tsc 插件，但编译会慢很多，修改package.json 配置文件。
最后 升级vue3 到最新版本： yarn add vue@next;
本文源码： https://github.com/damowangzhu/vite2-vue3-ssr_steps
参考资料：
https://vitejs.dev/guide/ssr.html
https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue
https://github.com/vok123/vue3-ts-vite-ssr-starter
感谢互联网具名和不具名的大佬们～
