【笑小枫】https://www.xiaoxiaofeng.com上线啦
资源持续整合中，程序员必备网站，快点前往围观吧~

我的个人博客【笑小枫】又一次版本大升级，虽然知道没有多少访问量，但我还是整天没事瞎折腾。因为一些功能在Halo上不太好实现，所以又切回了Vue3项目，本文就是对于Vue单页面项目SEO优化的一个简单的完整方案。

此次优化的最大好处，就是SSR时对已有的vue项目0侵入，不需要改任何的代码，赞啊👍👍👍

• vue：3.2.47
• vite：2.9.9
• vue-meta：3.0.0-alpha.8
• puppeteer：19.8.0

2.1 简单描述下如何SEO

唉，说实话，是个毛线的选型，我是先吭哧吭哧把项目上线了，才又想起来SEO这个坑，心累~

对于Vue来说，SEO最大的坑，如何返回渲染后的页面，也就是下面说的SSR了，然后就是动态Meta。

看看Vue.js关于SSR的介绍吧，很详细，也给出了方案

https://cn.vuejs.org/guide/scaling-up/ssr.html#overview

确实，也给出了更通用的方案。

全程写出的代码，这些通用的方案并不适合我。

2.2 简单说说这几种方案吧

• 网上比较多的是使用，但是用我已经开发好的项目来改，说实话，前端小白的我实在是改不动了。
• 不太了解，不过多介绍了。
• ， 提供了内置的 服务端渲染支持。也要改已有代码，不想改，不会改。

好吧，官方给的方案被我否定了，就是想找个不用修改已有代码的方法。太难了~

经过不懈的百度努力，发现了一线生机，简单说说这个吧

Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。

这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

废了好大一番功夫，然后爬取到的数据仍然是没有渲染的数据，尴尬的一批。

2.3 我使用的解决方案

说了这么多废话，说说我的最终解决方案吧~

用的方式类似于，使用的

Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来通过开发工具协议控制 Chrome/Chromium。 Puppeteer 默认以无头模式运行，但可以配置为在完整 (“有头”) Chrome/Chromium 中运行。

Puppeteer的作用，我主要用到的是SSR：

• 生成页面的屏幕截图和 PDF。
• 抓取 SPA（单页应用）并生成预渲染内容（即 “SSR”（服务器端渲染））。
• 自动化表单提交、UI 测试、键盘输入等。
• 使用最新的 JavaScript 和浏览器功能创建自动化测试环境。
• 捕获站点的时间线痕迹以帮助诊断性能问题。
• 测试 Chrome 扩展程序。

meta标签用于设置HTML的元数据（描述数据的数据），该数据不会显示在页面中，主要用于浏览器（如和现实内容或重新加载页面）、搜索引擎（如SEO）及其他web服务，这里使用进行设置。

3.1 Vue-meta 简介与安装

1. Vue-meta 是一个 Vue.js 的插件，允许你在组件中操作应用的 meta 信息，如标题、描述等。它对于单页应用 (SPA) 和服务端渲染 (SSR) 的项目特别有价值，因为它们在处理 meta 信息方面要比传统的多页面应用要复杂得多。

2. 为了使用 Vue-meta，首先需要安装。推荐使用 npm 进行安装，执行以下命令即可：

目前 vue-meta3 还是处于 alpha 阶段，不要低于 3.0.0-alpha.7

3. 接下来，需要在 Vue 项目中引入并使用 Vue-meta。在项目的 main.js 文件中，添加如下代码：

4. 在中添加标签，一定要添加，不然不生效哟

3. 在组件中使用 Vue-meta

1. 安装并引入 Vue-meta 后，可以在 Vue 组件中使用它。要在组件中添加 meta 信息，如标题、描述等，可以在组件内引用，在onMounted中设定相关的信息：

2. 上述代码中，我们设定了页面的 title（标题）为 “Vue-meta 示例”，并添加了两个 meta 标签：description（描述）和 keywords（关键词）。组件渲染时，Vue-meta 将自动更新这些 meta 信息。

3.3 Vue-meta 的高级用法

1. Vue-meta 不仅可以设置 meta，还支持设置其他 HTML 标签，如 link、style、script 等。下面是一个为页面添加样式和脚本的例子：

2. 通过请求后台数据，数据请求成功后，动态设置meta属性。最开始是放在中，因为数据也是放在中，感觉数据没有请求完，meta就渲染完了，导致不生效，暂时不知道怎么解决，误打误撞中，动态的页面会触发事件，于是就取巧放在了中，希望知道原因的前端大佬可以给予指导🙏🙏🙏

省略了非关键性代码，正常不会触发，这里误打误撞了…

Puppeteer中文网

上文简单介绍了Puppeteer，这里就不过多的介绍Puppeteer了，如需了解，可以去官网

搭建用到的工具

• node
• npm
• puppeteer
• express
• html-minifier
• google-chrome
• nginx

4.1 安装Node.js和npm

已经安装过node.js的机器忽略这部分即可，可以通过查看

1. 进入node安装目录

2. 下载安装包

3. 解压安装包

4. 设置软连接，建立快捷命令

5. 使用查看是否安装成功

4.2 安装 Puppeteer 及相关扩展工具

1. 创建并进入项目目录，会生成node_modules

2. 安装 puppeteer，express 与 html-minifier

注意：因为puppeteer最新版本可能需要的node版本不同，可以通过指定puppeteer版本
本文使用的版本

3. 安装依赖库

4.3 创建服务器端运行脚本

1. 创建渲染请求的页面脚本：spider.js

2. 创建优化puppeteer性能角本，默认不加载一些多余的功能，提高访问效率：puppeteer-pool.js

3. 创建服务端启动脚本：service.js

需要和spider.js放在一个目录

https://www.xiaoxiaofeng.com需要替换成你自己的域名

4. 执行启动puppeteer命令

启动成功后，可以通过查看日志，出现则代表运行成功，期间可能会出现各式各样的问题，再百度一下吧，这里就不一一列举了。

相当与启动了一个端口为3000的puppeteer服务。

启动的时候可能端口占用 3000被占用的话就换一个其他端口。

同时也会在/root/.cache/puppeteer/chrome/下装一个对应版本的谷歌浏览器

4.4 配置Nginx

我这里用的是docker容器启动的Nginx，proxy_pass换成对应的地址就行了，然后重启Nginx。

这样就可以了，让我们一起来测试一下吧

首先我们先正常的请求，不加请求头，请求结果如下，可以看到是没有渲染的vue页面。

然后我们加上请求头（这里直接复制了百度请求头），再次访问，可以看到请求到了渲染后的网页。

我们最后再去百度收录看一下爬取诊断吧。

处理前，百度爬取到的内容：

处理后，百度爬取到的内容（截图有限，看滚动条就可以清楚看见）：

最后，看一下我们网站访问有没有受影响吧，完美收官~

1. 首先通过服务器端渲染后返回，对服务器是有一定压力影响的，这个不可避免。
2. 上线后时不时会遇到这个错误，然后后续请求都会一直报错，正在排查原因。（可能是服务器配置太低的问题）

3. 每次都渲染JS，加载速度很慢

PS：莫名奇妙不知道优化了啥，速度一下提上来了，百度爬虫从原来的7s降到了1s，上文中的代码已经是优化后最新的代码。

本文到此就结束了，如果帮助到你了，帮忙点个赞👍