一、Vue SSR项目从输入URL到页面渲染的整个过程：
-
客户端请求 ：
用户在浏览器地址栏输入URL并发起请求。
-
服务器接收请求 ：
服务器接收到这个HTTP请求，开始处理。
-
服务器端路由解析 ：
服务器使用类似于客户端的路由解析逻辑来确定应该展示哪个组件。在Vue SSR中，通常使用
vue-router的match功能来实现。 -
创建Vue实例 ：
服务器创建一个新的Vue实例。这通常由一个工厂函数完成，以确保每个请求都是干净、隔离的。
-
数据预取和状态填充 ：
在渲染前，服务器会预取所有必要的数据。这通常通过组件内的特殊生命周期钩子或者路由导航守卫来实现，如
asyncData或fetch方法。 -
服务器渲染 ：
使用
vue-server-renderer的renderToString方法，将Vue实例及其子组件渲染成HTML字符串。这个过程包括虚拟DOM的创建和对应的HTML标签的生成。 -
HTML模板处理 ：
渲染出的HTML会被插入到一个HTML模板中，通常这个模板包含了基本的HTML结构，如
<head>标签和未渲染的占位符。 -
发送响应 ：
完整的HTML页面会作为HTTP响应发送给客户端。
-
客户端加载和混合 ：
客户端浏览器接收到HTML文档并开始加载页面。然后它会下载并执行附带的JavaScript文件。Vue客户端版本会接管这个静态HTML并将其转换为响应式的Vue实例，这个过程称为
"水合"（hydration）。 -
客户端路由接管 ：
完成混合后，
vue-router将开始在浏览器端接管路由，之后的页面导航就会在客户端完成，不再请求服务器渲染。 -
交互式页面 ：
用户现在可以与页面交互，所有的Vue功能都是可用的，就像在完全的SPA（单页应用）中一样。
二、搭建项目：
一、搭建node项目，安装依赖
css
npm init
npm i express
npm i webpack webpack-cli nodemon -D创建src文件夹，源代码目录
其下创建server写服务端相关代码
创建config文件夹，用来放置webpack的配置
创建build文件夹，用来放打包后的文件
在package.json中写启动项目命令行
二、webpack配置
在config文件夹中创建serve.config.js，在此处写服务端的打包配置代码
css
npm i @babel/preset-env babel-loader webpack-node-externals -D使用babel来转义js
webpack-node-externals排除node.js中的内置模块和node_modules中的第三方模块,使它们不被打包进最终的输出文件中，这样可以减小打包文件的体积
package.json中添加打包服务端代码的命令行
三、引入vue
安装vue、vue-loader
css
npm i vue
npm i vue-loader -D使用vue-server-renderer的renderToString方法，将Vue实例及其子组件渲染成HTML字符串，当本地访问7777端口时，发送字符串形式的HTML
src下创建client写客户端相关代码，创建并挂载vue实例
和服务端一样，配置下客户端client.config.js的webpack代码
此时发现服务端和客户端很多配置项一样，我们可以优化下，通过webpack-merge抽离下服务端和客户端共同的代码，如下
css
npm i webpack-merge -D
新增的vue文件和package.json命令行
打包后运行，点击事件也没有问题，这样一个简易版的vue3+ssr就完成啦。后面我们再集成下路由和状态管理
四、集成路由
安装vue-router
css
npm i vue-router新建两个vue页面和路由文件，客户端用history模式，vue-router为node环境提供了createMemoryHistory模式
此时已是多页面了，将server.get /后加上*，匹配所有7777端口号的页面，根据输入的url来匹配页面。服务端和客户端中都要写路由相关的代码，注意，路由的操作是异步的，要等跳转url后再操作，不要忘了async和await
五、集成状态管理
安装pinia
css
npm i pinia
同集成路由一样服务端和客户端中都要写pinia相关的代码，创建pinia实例，安装pinia插件
打包后运行，可以页面跳转，状态共享，这样就完成啦~
