前言

大家都知道本项目是由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查看

1. 进入node安装目录

2. 下载安装包

3. 解压安装包

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

1. docker 或直接安装nginx
   如果使用的是docker或直接安装的nginx，则在配置文件添加如下代码：

2. 宝塔部署的nginx
   选择你的主页网站，点设置进入在选择伪静态，在里面添上如下代码：

测试

通过以上步骤后，我们就可以来测试一下了，使用apipost来测试