vue项目利用预渲染处理seo

写在前面

什么是SEO？

SEO是英文 Search Engine Optimization 的缩写，中文意思“搜索引擎优化”。SEO是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，从而获得更多流量，最终达成品牌建设或者产品销售的目的。

SEO的目的？

提升搜索引擎爬虫覆盖率
提升平台知名度
…

爬虫是什么

以百度爬虫为例

1、发现网站：百度爬虫每天都会在各个网站上爬，抓取无数的网站与页面，进行评估与审核，优质的内容就会被收录。一个新网站一般都需要一周左右才会被爬虫发现，只要坚持不断更新网站，内容优质，一定会被发现的。
2、抓取网站：百度爬虫一般是先根据预先设定的初始网页的URL开始，然后按照一定的规则爬取网页。爬虫顺着网页中的各种链接，从一个页面爬到另一个页面，通过链接分析连续爬行访问，抓取更多的页面。被抓取的网页就是百度快照。
3、保存网站：百度爬虫的喜好跟我们人类的喜好是一样的，喜欢新鲜的、独一无二的东西。如果网站经常更新，内容质量非常高，那么爬虫就喜欢待在这里，顺着链接来回爬，欣赏这独一无二的风景，并且会保存下来。如果网站的内容都是抄袭来的，或其他网站上早就有了，爬虫就认为是垃圾内容，便会离开网站。
4、分析网站：百度爬虫抓取到网站之后，要提取关键词，建立索引库和索引，同时还要分析内容是否重复，判断网页的类型，分析超链接，计算网站的重要程度等大量的工作，分析完毕之后，就能提供检索服务。
5、参与网站：当爬虫认为网站的内容符合它的喜好了，通过一系列的计算工作之后，就被收录起来，当用户输入关键词并进行搜索的时候，就能从搜索引擎中找到该关键词相关的网站，从而被用户查看到。
如上所说，爬虫会在访问url时对其资源进行一个收集操作，url或者域名指向资源也就是能被爬虫爬到的内容。

Vue项目如何支持SEO？

在探索如何支持SEO之前，我们先了解一下为什么VUE项目不支持或很难支持SEO

<div id="app"></div> 

一个标签。

讯享网<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <title></title> </head> <body> <div id="app"></div> </body> </html> 

当你通过浏览器的【查看源代码】时（不是检查），不管你在任何页面，内容也只会有上面的几句代码，所以爬虫也不会从你的源代码资源中获取到你通过框架动态生成的dom信息。
了解了为什么，就能有对应的解决方案，恰巧官方都有提供。
在官方提供的方案如下：

1、SSR服务端渲染

什么是服务端渲染？

2、预渲染处理

开始代码

第一步

如果你使用 webpack，你可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试 - 事实上，作者是 Vue 核心团队的成员

使用官方推荐的预渲染插件prerender-spa-plugin

npm install prerender-spa-plugin --save 

在vue.config.js中

讯享网const PrerenderSPAPlugin = require("prerender-spa-plugin"); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const prerenderRoute = [ // 这里是需要生成独立html文件的路由地址 '/', "/setting", "/account" ]; module.exports={ 
    configureWebpack: (config) => { 
    config.entry.app = ["./src/main.js"]; if (process.env.NODE_ENV !== "production") return; // 这里是判断是否为生产环境，此操作只需要在打包时配置，本地开发时不建议开启，因为会进入浏览器预渲染生成影响正常项目开发。 return { 
    plugins: [ new PrerenderSPAPlugin({ 
    staticDir: path.join(__dirname, "dist"), routes: [...prerenderRoute], renderer: new Renderer({ 
    inject: { 
    foo: "bar", }, headless: false, renderAfterDocumentEvent: "render-event", }), }), ], }; }, } 

讯享网

new Vue({ 
    router, store, render: h => h(App), mounted() { 
    document.dispatchEvent(new Event('render-event')) }, }).$mount('#app') 

第三步

调整路由模式为history

讯享网const router = new VueRouter({ 
    mode: 'history', routes, base:'/', }) 

因为使用了history路由模式，也需要在服务器配置对应的路由重写，保证其他页面刷新后不丢失提示404。

最后

build打包

$ npm run build 

查看dist目录，会发现打包后的dist中多了2个我们路由对应的文件夹。

进去后是一个单独的html文件

我们打开这个文件可以看到

页面内容已经跟dist/index.html不同，并且是该页面的元素代码。

完成

特别注意

prerender-spa-plugin并不支持对 about/:userId这样的动态路由预渲染

更多SEO

我们还可以引入

讯享网vue-meta-info 

库来动态修改对应页面的头部meta标签

$ npm run build 

npm install vue-meta-info --save

在main.js中全局引入

讯享网import MetaInfo from 'vue-meta-info'; Vue.use(MetaInfo); 

在需要自定义的页面组件中使用

<template> ... </template> <script> export default { 
    metaInfo: { 
    title: '官网首页', meta: [ { 
    name:'viewport', content: 'balbalabalabalaba'} ] }, } </script> 

最后

通过vue-meta-info搭配prerender-spa-plugin可以让一个SPA项目也能简单支持seo，不过局限性还是存在，所以如果需要有良好的seo效果，最好还是使用服务端渲染，现在市面上已经有很成熟的SSR框架啦，或者手撸原生。