前言
大家都知道本项目是由vue写的，由于vue是单页面的，所以对于seo优化来讲并不是很友好，蜘蛛只能抓取首页，但是呢，虽然流量没有多少，但我们的seo还是要做一做的，毕竟有seo才能吸引到更多的用户访问。
说说几种方案吧
- 网上比较多的是使用Nuxt.js，但是用我已经开发好的项目来改，说实话，前端小白的我实在是改不动了。
- Quasar不太了解，不过多介绍了。
- Vite SSR，Vite 提供了内置的Vue 服务端渲染支持。也要改已有代码，不想改，不会改。
官方给的方案被我否定了，就是想找个不用修改已有代码的方法。经过不懈的百度努力，发现了一线生机Puppeteer，简单说说这个吧
Puppeteer
Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来通过开发工具协议控制 Chrome/Chromium。 Puppeteer 默认以无头模式运行，但可以配置为在完整 (“有头”) Chrome/Chromium 中运行。
Puppeteer的作用，我主要用到的是SSR：
- 生成页面的屏幕截图和 PDF。
- 抓取 SPA（单页应用）并生成预渲染内容（即 “SSR”（服务器端渲染））。
- 自动化表单提交、UI 测试、键盘输入等。
- 使用最新的 Javascript 和浏览器功能创建自动化测试环境。
- 捕获站点的时间线痕迹以帮助诊断性能问题。
- 测试 Chrome 扩展程序。
SEO实现-使用Puppeteer进行SSR
搭建用到的工具
- node
- npm
- puppeteer
- express
- html-minifier
- google-chrome
- nginx
1. 安装Node.js和npm
已经安装过node.js的机器忽略这部分即可，可以通过node -v查看
- 进入node安装目录
- 下载安装包
- 解压安装包
4.设置软连接，建立快捷命令
- /node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or directory
- /node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libatk-bridge-2.0.so.0: cannot open shared object file: No such file or directory
- /node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libxkbcommon.so.0: cannot open shared object file: No such file or directory
- /node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libXcomposite.so.1: cannot open shared object file: No such file or directory
- /home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libgtk-3.so.0: cannot open shared object file: No such file or directory
4. 配置Nginx
- docker 或直接安装nginx
如果使用的是docker或直接安装的nginx，则在配置文件添加如下代码：
- 宝塔部署的nginx
选择你的主页网站，点设置进入在选择伪静态，在里面添上如下代码：
测试
通过以上步骤后，我们就可以来测试一下了，使用apipost来测试