vue使用prerender预渲染配合vue-meta实现单页面实现SEO优化

公司项目在已在开发完成的情况下通知需要做SEO优化。因为项目使用的是vue做的单页面应用，顿时人都不好了，只好网上搜罗出来一些配置（其实是另一个带我的老大哥他做的，但是他要走了，工作交接给我， 我需要掌握，所以也算是偷来一门技艺吧）。

交代一下：选用prerender-spa-plugin插件配合vue-meta

文章目录

一、 安装插件二、配置预渲染路由`prerender > config.js``prerender > index.js` 三、vue.config.js 文件中的配置四、页面应用五、将meta信息整合进入项目六、打包七、其他注意八、其他注意事项大佬交接资料之 —— `README.md`

一、 安装插件

前端全家桶敲代码前的规矩：配置好package.json然后npm install。或者

npm install --save prerender-spa-plugin vue-meta

但是不好意思，刚看了一眼之前写的注意事项，直接下载太慢了，首先还不能这样玩儿☺

安装插件的步骤分为两步：

1.首先添加环境变量，提高puppeteer的下载速度：PUPPETEER_DOWNLOAD_HOST=/mirrors

2.然后执行爽翻天的npm install操作

3.？？还有3？install过程超级慢，先睡一觉吧！

不过倒是有个注意事项：下载过程中会下载一个无头浏览器（这就是下载慢的原因），一看无头浏览器就该知道SEO优化基本实现就靠它了吧。

要是下载失败，不好意思，请你把prerender相关的包删除掉再重新下载，直到下载成功！

二、配置预渲染路由

新建prerender相关文件文件中配置预渲染路径

1. 新建prerender相关文件：

这话有点废话了。就是我建了一个prerender文件夹，里面专门存放预渲染相关配置文件。

emmm,太菜了本来想搞个局部目录索引来的，学业不精，直接贴吧，也是做个记录。（.md文件不用管，实际上我是看着大佬留下的README.md边做边写完成了README.init.md，然后现在又看着README.init.md在写这篇文章（手动狗头）） 文件中配置预渲染路径

配置的时候要注意一点，配置时使用的name或path，不是路由的name或path,应是真是确定的URL地址（访问浏览器时显示的真是URL）

prerender > config.js

exports.renderAfterDocumentEvent = '__PRERENDER_TRIGGER';/*** 需要预渲染的页面路由* Note: 路由 url 不能超过两层* @type { String[] }**/exports.routes = ['/home/page', // ... 这里请配置路由 url'/detail/1',];

说明：

此处的路由真是地址栏的 url ，是什么样呢，就是我们这个用在详情页，然后把详情页的id写入了 url 中，结果就是/detail/1这样的配置。很无奈很重要的一点是，经过测试，这里配置的路由不能超过两层。我们之前也是有三层的，就是详情嘛，像/page/detail/1这样，但是不行，强行把路由改成了两级！

prerender > index.js

import Vue from 'vue';const {renderAfterDocumentEvent } = require('./config');const prerenderEvent = new Event(renderAfterDocumentEvent);/** 通知开始保存预渲染页面 */export const emitPrerender = (timeout = 0) =>new Promise(resolve => {Vue.nextTick(() => {window.setTimeout(() => {window.document.dispatchEvent(prerenderEvent);resolve();}, timout);});});

三、vue.config.js 文件中的配置

vue.config.js 具体定义需要变量生成配置vue.config.js 具体定义需要变量：

const {ContextReplacementPlugin } = require('webpack');const PrerenderSPAPlugin = require('prerender-spa-plugin');// 此处路径为prerender的配置路径const PrerenderConfig = require('../src/prerender/config');const simplifyMomentPlugin = new ContextPeplacementPlugin(/moment[/\\]locale$/, /zh-cn/);

// 渲染器（无头浏览器）配置项，使用 `renderAfterDocument` 来确定渲染时机const renderer = new PrerenderSPAPlugin.PuppeteerRenderer({// headless can be false when debug, 服务器上必须设置为trueheadless: true,renderAfterDocumentEvent: PrerenderConfig.renderAfterDocumentEvent,defaultVireport: null,});const prerenderPlugin = new PrerenderSPAPlugin({staticDir: resolve('dist'),routes: PrerenderConfig.routes,minify: {minifyCSS: true,removeComments: true,keepClosingSlash: true,caseSensitive: true,},renderer,});

生成配置（重写 configWebpack 项，此处原本有 simplifyMonmentPlugin 项，现独立出来 ）：

configureWebpack: config => {config.plugins.push(simplifyMomentPlugin);if (isProduction) config.plugins.push(prerenderPlugin);}

四、页面应用

在需要的页面文件内引入emitPrerender在需要使用的地方调用新增一个生命周期函数metaInfo在需要的页面文件内引入emitPrerender：

import {emitPrerender } from '@/prerender';

注：路径请自行脑补

在需要使用的地方调用：

// 如在 mounted 中页面赋值完成，执行await emitPrerender();

注：拿产品详情页来说，一定要等到需要的数据渲染完成之后再执行函数。

新增一个生命周期metaInfo：

// 这里注意是一个新增的生命周期函数metaInfo() {return this.createMetaInfo();}// methodscreateMetaInfo() {const appTitle = '吕小胖纸的测试appTitle'; // 配置的项目名称const siteURL = this.$app.siteURL; // 项目网址const SITE_DESCRIPTION = '吕小胖纸的测试描述';return {title: appTitle,meta: [{name: 'description', content: SITE_DESCRIPTION },{name: 'keywords', content: 'keywords' },{property: 'og:type', content: 'website'},{property: 'og:title', content: appTitle },{property: 'og:site_name', content: appTitle },{property: 'og:url', content: siteURL },{property: 'og:description', content: SITE_DESCRIPTION },],};}

emmm,命名啊还有内容什么的别太在意了。

五、将meta信息整合进入项目

main.js引用

import vueMeta from 'vue-meta';vue.use(vueMeta);

六、打包

运行npm run build

注：如遇到打包失败，报Puppeteer未安装等错误，需将已安装的包删除，或者尝试重启电脑再重新npm install等之后操作。

（emmmm,所以我上文是不是说错了，安装失败？打包失败？算了，反正都删掉再重新安装总是没错的）

七、其他注意

需将路由模式改为hash模式修改打包后路径

路由模式改为hash模式:

// routes -> index.js new Router 加入属性const router = new Router({mode: 'history',routes: [xxx],});

修改打包后路径vue.config.js：

// 路由改为了hash模式，则vue.config.js中publicPath路径修改publicPath : '/';

八、其他注意事项

emmm,这里我就懒了，我的文件重定向了一下（皮一下），详见README.MD（主要寻找服务器配置参考）哈哈！

还是贴出来吧，也是记录大佬的文件！简洁。话说要不是我知道他肯定会整我，在他走之前把这个的配置流程过了一遍，我不得被他整死，给大家欣赏欣赏高冷风

大佬交接资料之 ——README.md

emmm,话说直接插入md格式咋个搞（哭笑不得）那我就以js文本格式写吧

// ### 预渲染为实现较完善的 SEO ，对部分页面进行渲染，使用 headless brower 渲染页面，保存生成后的静态 HTML 文件，便于搜索引擎爬取。// #### 安装说明* 添加环境变量，提高[`Puppeteer`](/puppeteer/puppeteer)的下载速度PUPPETEER_DOWNLOAD_HOST=/mirrors* 若在服务器上打包，出现问题个查看[问题排查](/puppeteer/puppeteer/blob/master/docs/troubleshooting.md)// #### 已知限制* 路由需要使用 `history` 模式* 需要预渲染的页面的 URL 不能超过两级（v3.4.0）// #### 使用说明1. 将需要预渲染的页面 URL 加入 `config.js` 的 `routes` 配置中> 注意：不是路由的 `name` 或 `path`，应是真实确定的 URL 地址2. 在页面组件中引入本模块的 `emitPrerender` 方法```jsimport { emitPrerender } from '@/prerender';```3. 在合适的时机（例如页面所有数据均已获取完成时），调用执行 `emitPrerender` 方法

老规矩，写文章是为了记录，毕竟以后可能会用到，另外，隔一段时间再回来看也是巩固知识啦！有任何不同声音探讨，我一定虚心请教其他人

完。