前言之前接触了NuxtJs，做了一些案例，发现还是没有深入了解整个SSR搭建过程，决定尝试自己从0开始搭建VueSSR，同时因为苦于重构自己的博客项目，也借此机会将最新的SSR技术应用到实际项目中。前端技术选型前端技术选型的中心在于对SSR的支持程度。第三方库如果没有考虑到通用性的编写，可能很难将其集成到SSR应用中，可能会出现在node.js中调用浏览器API的情况。开发框架（Vue3）选择Vue3作为主要开发框架，可以使用hooks提取部分逻辑，使代码结构更加清晰。将预处理器（Stylus）与常用的SCSS预处理器进行比较，Stylus在编写CSS代码方面要比前者简单很多，而且在遵循编写规范的基础上也具有很高的包容性，甚至可以省去不必要的冒号分号等。开发语言（TypeScript）使用TypeScript进行类型约束，降低未知错误概率，大胆修改逻辑内容。网络（Axios）之所以选择Axios，是因为其成熟的双端运算能力，为项目中的SSR带来了优势。UI框架（Element-plus）采用了Element-plus，一个成熟的适配Vue3的UI库，对SSR的支持度也很高。路由库（Vue-Router）搭配Vue3的Vue-Router4，同样支持SSR。状态存储库(Pinia)选择Pinia。第一点是兼容Vue3。提供了TypeScript智能补全的功能，比Vuex更轻巧简洁（去掉mutation）。支持钩子写法。第二点支持SSR，官方文档有很好的服务器支持。模块打包工具（Webpack5）用的是最新的Webpack5，自己也想学习巩固相关配置使用。Markdown解析库（highLight+Marked）highLight.js+Marked.js一起使用，提供更多自定义配置，可以让网站花里胡哨。后端技术选择后端技术在原来的vue2-ssr项目的后端基础上基本做了一些改动，使用Typescript进行类型约束，用ORM框架Sequelize代替了原来的sql字符拼接查询，即更有效和安全的数据库访问。Node.jsExpressMySQLSequelize（ORM框架）axios目录|--项目|--客户端客户端项目文件夹|--服务器服务器项目文件夹|--.browserslistrc|--.dockerignore|--.gitignore|--.prettierignore|--.prettierrc|--auto-imports.d.ts|--babel.config.js|--components.d.ts|--nodem_dev.json|--nodem_prod.json|--package-lock.json|--package.json|--postcss.config.js|--README.md|--todo.md|--tsconfig.json|--version.md架构描述和整体思路本项目主要围绕服务端渲染的思路搭建。之前的文章也提到了服务端渲染的整体思路，因为之前做过一个Vue2版本的服务端项目，使用的技术栈比较陈旧。为了适应新环境的需要，项目采用了前端领域最新最成熟的技术，整体架构如下
