### 前言
* 先了解什么是seo？
* 再了解搜索引擎蜘蛛的工作原理？
* seo为啥对vue单页面不友好?
* vue项目怎么做seo优化？
* prerender-spa-plugin怎么使用，以及它的工作原理
### 什么是seo？
SEO是由英文Search Engine
Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。
### 引擎蜘蛛的工作原理？
详情查看[蜘蛛的工作原理](http://www.sohu.com/a/318766367_461925);不够详细的话自己百度一下
搜索引擎蜘蛛的爬行是被输入了一定的规则的，它需要遵从一些命令或文件的内容。
网络爬虫在爬取网页内容的时候，需要分析页面内容，主要有以下几点：
* 从 meta 标签中读取 keywords 、 description 的内容。
* 根据语义化的 html 的标签爬取和分析内容。一个整体都是用 div 标签的网站和正确使用了 html5 标签的效果是不一样的。
* 读取 a 标签里的链接，通过 a 标签的链接可以跳转到别的网站。（爬虫是先跳转，还是继续爬内容再跳转，就看算法是广度优先还是深度优先了）
* 像 h1 - h6 标签是具有不同程度的强调意义的。
* 一般将 h1 视为重要内容。同样有强调内容还有 strong 、 em 标签。
### seo为啥对vue单页面不友好?
* 爬虫在爬取的过程中，不会去执行js，所以隐藏在js中的跳转也不会获取到
* vue通过js控制路由然后渲染出对应的页面，而搜索引擎蜘蛛是不会去执行页面的js的，导致搜索引擎蜘蛛只能收录index.html一个页面，在百度中就搜索不到相关的子页面的内容。
* 我们加载页面的时候,浏览器的渲染包含:html的解析、dom树的构建、cssom构建、javascript解析、布局、绘制,当解析到javascript的时候才回去触发vue的渲染,然后元素挂载到id为app的div上,这个时候我们才能看到我们页面的内容,所以即使vue渲染机制很快我们仍然能够看到一段时间的白屏情况,用户体验不好
###### 引起的问题
1. 收录的页面少了->被抓取的页面就少了->点击量之类的也就少了；
2. 不能对对应的页面做TDK(title, keywords, description)不同的配置，每个页面的title和meta标签都是一样的，不利于网络爬虫的爬取
---
###### 怎么解决那？
html就不能通过js生成，我们需要在加载js之前做一下页面的预渲染,目前了解到的有两种方法，vue的ssr渲染([配置参考](https://cn.vuejs.org/v2/guide/ssr.html))和prerender-spa-plugin插件实现([配置参考](https://www.npmjs.com/package/prerender-spa-plugin))。SSR比较复杂，所以选了prerender-spa-plugin来尝试。
### prerender-spa-plugin的使用
See [配置参考](https://cli.vuejs.org/config/).
本次只介绍vue-cli3的解决方案
使用 webpack + [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) + vue-meta-info轻松地添加预渲染
```
npm install prerender-spa-plugin --save
```
vue.config.js
```
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
// eslint-disable-next-line no-unused-vars
const webpack = require('webpack')
const path = require('path')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, 'dist'),
// outputDir: path.join(__dirname, './'),
// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
routes: ['/testData', '/contact'],
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: { //默认挂在window.__PRERENDER_INJECTED对象上，可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'//等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机
})
})
]
}
},
}
```
* staticDir 指的是预渲染输出的页面地址，
* routes 指的是需要预渲染的路由地址，
* renderer 则是所采用的渲染引擎是什么，目前用的是 V3.4.0 版本支持 PuppeteerRenderer。
* inject 则是预渲染过程中都能拿到的值，该值提供给你了机会，让你觉得是否渲染这部分代码。例如下面的代码，是不会被预渲染进 HTML 中的。
```
showMessage(){
if(window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.foo =='bar') return;
this.message = '我是测试预加载拦截';
}
```
* renderAfterDocumentEvent 这个则很关键，这个是监听 document.dispatchEvent 事件，决定什么时候开始预渲染
main.js
```
new Vue({
router,
store,
render: h => h(App),
//添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
```
###### 然后就是npm run build打包
<span style="color: red">
1. router.js里面把mode要为'history',hash模式会打包的时候生成同样的页面，所以一定要history<br/>
2.打包之后上传到服务器才可以看到效果，或者本地自己创建一个服务
</span>
这样dist的文件夹目录结构就会变成如下的样子
就是打包之后，每个路由都会打包成一个文件夹，都有一个对应的静态 HTML;
每一个 HTML 内除了
```
<div id="app"></div>
```
这个 Vue 的挂载元素外，还有静态的标签内容。
```
<body>
<div id="app">
<div data-v-fa8a7bc4="" class="app-wrapper openSidebar">
<section data-v-2c0baa24="" data-v-fa8a7bc4="">
<div data-v-2c0baa24="">
<div aria-label="Breadcrumb" role="navigation" class="el-breadcrumb"><span class="el-breadcrumb__item"><span
role="link" class="el-breadcrumb__inner is-link">首页</span><span role="presentation"
class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"><span role="link"
class="el-breadcrumb__inner">活动管理</span><span role="presentation"
class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"><span role="link"
class="el-breadcrumb__inner">活动列表</span><span role="presentation"
class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"
aria-current="page"><span role="link" class="el-breadcrumb__inner">活动详情</span><span role="presentation"
class="el-breadcrumb__separator">/</span></span></div>
</div>
</section>
</div>
</div>
<script src="config/config.js"></script>
<script src="/static/js/chunk-vendors.cb183907.js"></script>
<script src="/static/js/app.83e704ba.js"></script>
</body>
```
###### 遇到的问题
1.本地起服务测试,会发现能正常运行，但是做了优化的页面刷新之后会没有样式
造成问题的原因就是打包的时候vue.config.js的资源路径配置不对
没有优化之前的路径是
```
// 资源路径
publicPath: './',
```
打包之后路由下面的资源路径是这样的
###### 解决办法
优化之后的路径是
```
// 资源路径
publicPath: '/',
```
打包之后的路由下面的资源路径是这样的
就是路径前面多了一个/,采用了绝对路径
###### 这个时候需要一个服务来测试
1.全局安装node.js
2.安装成功后，执行npm install anywhere -g 安装anywhere
3.在对应路径下打开cmd，执行anywhere指令。如图：
然后就可以在浏览器输入地址访了，可以看到每个路由对应的 HTML
---
#### prerender-spa-plugin 是如何做到将运行时的 html 打包到文件中的呢？
* prerender-spa-plugin插件的工作流程图:
* prerender-spa-plugin 利用了 Puppeteer[4] 的爬取页面的功能。 Puppeteer 是一个 Chrome官方出品的 headlessChromenode 库。它提供了一系列的 API, 可以在无 UI 的情况下调用 Chrome 的功能, 适用于爬虫、自动化处理等各种场景。它很强大，所以很简单就能将运行时的 HTML 打包到文件中。
* 原理是在 Webpack 构建阶段的最后，在本地启动一个 Puppeteer 的服务，访问配置了预渲染的路由，然后将 Puppeteer 中渲染的页面输出到 HTML 文件中，并建立路由对应的目录。
* 每个路由对应的 HTML，然后我们可以更改每个路由文件里的 title 、 meta keyword等 。
* 另外页面的内容都已经在 HTML 中直接呈现，也可以解决 js 等资源加载慢导致白屏的问题。
###### prerender-spa-plugin 的确在一定程度上解决了我们对于 SEO 的诉求和页面加载慢的问题。但是它的缺点还是很明显的。
* 不同的用户看到不同的页面，动态数据页面（预渲染在获取用户权限数据之前就进行渲染了，所有他不能做到这个）
* 动态路由也不可以（webpack编译的时候 路由还没挂载那）
* 经常发生变化的页面，数据实时性展示（比如体育比赛等 我们现在的方式是前端拿到组件后进行组装数据，然后在进行渲染 像这种实时数据的会不准确）
* 路由过多，构建时间过长
###### 然后就是为这些打包的静态页面分配title和meta标签，需要用到 [vue-meta-info](https://www.npmjs.com/package/vue-meta-info)
```
安装
npm install vue-meta-info --save
```
main.js里面引入vue-meta-info
```
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
```
这样在组件页面中就可以使用了
假设你要给contact.vue添加title，meta标签
contact.vue
```
<template>
...
</template>
<script>
export default {
metaInfo: {
title: '我是contact头', // set a title
meta: [{ // set meta
name: 'keyWords',
content: '我是contact关键字'
},
{
name: 'description',
content: '我是contact描述'
}],
link: [{ // set link
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
}
</script>
```
这样再结合prerender-spa-plugin，打包之后，在dist文件夹找到contact文件夹下的index.html
打开你会发现就有title和meta的关键字和描述标签了
本地起服务或者发布到线上运行项目，在页面右键---查看源代码---就可以看到页面的title和meta标签了。
原文地址：https://blog.csdn.net/kang_k/article/details/100513766
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。