八、SPA单页面实现SEO优化之预渲染prerender-spa-plugin

本文主要是介绍八、SPA单页面实现SEO优化之预渲染prerender-spa-plugin，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- 一、前言
- 二、prerender-spa-plugin预渲染方式实现SEO
- - 插件介绍
  - 实现步骤

一、前言

关于SPA和SEO优化、SSR服务器渲染的介绍可以参考这里：
六、什么是SEO优化（搜索引擎优化）？SPA单页面应用如何实现SEO优化？

通过上一篇文章我们介绍了服务端渲染的方式来实现单页面应用的SEO优化。但是，服务端渲染的方式对开发并不友好，它需要约定各种规范，比较适合开发大型网站。
对于一些微型网站，比如个人博客，或者公司的小型应用网站，路由数量，页面数量并不多，我们可以使用prerender-spa-plugin预渲染来实现SPA单页面的SEO优化。
它的优点是简单方便，不需要改动太多原来的项目内容。

二、prerender-spa-plugin预渲染方式实现SEO

插件介绍

这里要介绍的是基于prerender-spa-plugin与vue-meta-info的一套官网前端SEO预渲染方案。

prerender-spa-plugin：
prerender-spa-plugin是一个webpack插件，其作用是将渲染的页面固化成HTML文件。原理是利用无头浏览器（puppeteer）遍历配置中的路由，在收到结束的事件时，将当时的页面数据输出成HTML文件。

vue-meta-info：
vue-meta-info是一个能在vue中使用的工具，能在vue文件中动态更改当前页面的meta中的信息（例如title，description等）。

将二者结合，就可以做到动态渲染页面内容，并输出html文件。

实现步骤

我们先看一下未预渲染之前，我们的Vue项目打包后的内容：
在这里插入图片描述

可以发现，我们的网站应用只有一个html页面，而且网站的主要组件内容都没有在这个html页面上显示，都需要运行里面的js文件，才能够渲染出具体的网站内容。
而搜索引擎的爬虫，是不会运行这些js文件的，因而我们网站的关键字信息会非常少，外界几乎不可能根据这点信息搜索到我们的网站。
下面我们开始使用prerender-spa-plugin和vue-meta-info来做SEO优化把！

1.安装prerender-spa-plugin

cnpm i @dreysolano/prerender-spa-plugin

这里要注意啦，不是官方的cnpm install prerender-spa-plugin 这个库，这个库有些插件没更新，因此后面打包会报错的，我也是踩坑查资料才解决的。

2.在vue.config.js里加入插件的配置信息
该配置直接加到

configureWebpack: config => {if (process.env.NODE_ENV !== 'production') return// const PrerenderSPAPlugin = require('prerender-spa-plugin')const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin')const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;const path = require('path');return {plugins: [new PrerenderSPAPlugin({// 生成文件的路径，也可以与webpakc打包的一致。     // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。staticDir: path.join(__dirname,'dist'),// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。routes: ['/','/home','/user'],// 这个很重要，如果没有配置这段，也不会进行预编译renderer: new Renderer({inject: {foo: 'bar'},headless: false,// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。renderAfterDocumentEvent: 'render-event',renderAfterTime:5000})})]}}

在这里插入图片描述

2.router.js配置
项目中的路由必须配置成history模式

const router = new VueRouter({mode: 'history',base: process.env.NODE_ENV === 'development' ? '' : '/',scrollBehavior: () => ({y: 0}),routes
})

在这里插入图片描述
3.main.js配置预渲染启动

/* 这句非常重要，否则预渲染将不会启动 */mounted () {document.dispatchEvent(new Event('render-event')) // 触发}

在这里插入图片描述

4.vue-meta-info安装

cnpm i vue-meta-info --save

5.main.js引入vue-meta-info
找到main.js文件加入以下代码

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

6.可以在各个vue页面里面配置属于自己的meta标签
如下

<script>
export default {// 配置title和meta数据metaInfo: {title: 'title',meta: [{name: 'keywords',content: '关键字'},{name: 'description',content: '描述'}]},data () {return {}}
}
</script>

7.打包