vue3使用vite-plugin-ssr实现ssr

最近想用vue做个简单的网站，体验下建站的全流程，写篇文章记录下vue开发过程。

之前的vue开发默认都是用了单页面应用，这次做的时候想到了SEO，决定尝试下SSG模式部署。

为什么用SSR/SSG

个人网站想要有自然流量，肯定要依赖百度、bing等搜索引擎网站的展示，权重越高越容易被展示，这就是要做好SEO。VUE默认情况下都是生成的单页面应用，即SPA。但是SPA 对 SEO 优化不友好。

比如网站有10个页面，SPA是生成独立的应用，完全加载后在浏览器渲染，因此搜索引擎无法获取到完整的页面内容。

使用SSR的方式就是把应用生成完整的10个独立页面，只是需要在服务端运行node程序实时生成html，比较耗费资源。

另一种方式是在build的时候直接生成10个html，使用nginx部署在服务器上，就可以获取页面完整内容，更利于SEO，这就是SSG。

使用vite-plugin-ssr实现SSR

我的网站是基于vue3开发，调研之后，决定使用vite-plugin-ssr来实现SSG，下面介绍下具体实现。

vite-plugin-ssr官网：https://vite-plugin-ssr.com/

1.项目结构

这里建议直接使用vite-plugin-ssr提供的vue示例程序，其中已经把必要的配置都写好了，可以直接进行二开，非常方便，下面的功能介绍也主要基于这个示例展开。

示例的Git地址：https://github.com/brillout/vite-plugin-ssr/tree/main/examples/vue-full

2.目录及主要文件介绍

• 开发时，直接在pages/目录下建自己的页面就可以，url路径就是文件路径

├── components
│   └── Counter.vue
├── package-lock.json
├── package.json
├── pages //在这里创建网站的页面
│   ├── index.page.vue //这里默认是“/”路径展示的页面
│   └── star-wars
│       ├── filterMovieData.ts
│       ├── index
│       │   ├── index.page.server.ts
│       │   └── index.page.vue 
│       ├── movie
│       │   ├── index.page.route.ts
│       │   ├── index.page.vue
│       │   └── onBeforeRender.ts
│       └── types.ts
├── readme.md
├── renderer
│   ├── Link.vue
│   ├── PageShell.vue //app.ts中设置的主入口，其他vue页面通过slot加载过来