vue开发网站seo优化方法

前言：

因为用了vue等js的数据绑定机制来展示页面数据，爬虫获取到的html是模型页面而不是最终数据的渲染页面，搜索引擎是不回去执行请求到的js。vue的项目都是ajax请求数据，引擎爬虫进入页面获取不到文字内容，现在大多数解决方案是不采用ajax渲染数据，而是采用server端渲染，也就是所谓的SSR。
目前基于vue的方案是Nuxt.js，同类型的也有React版的Nuxt.js

所以服务端渲染就是尽量在服务器发送到浏览器前，页面上是有数据可让爬虫进行爬取

方法一、利用prerender-spa-plugin插件将单页面应用打包成多页面

公司里有的项目要进行一个非常重要的功能就是seo的优化，第一次遇到这个东西堵了一段时间，之后还去请教了好些人都没有得到好的解决办法。后来自己通过webpack和prerender-spa-plugin第三方插件这两个工具配合使用来实现曲线就救国。

问题描述

传统的vue通过vue-cli脚手架搭建完成后要通过npm run build来打包生成最后的要放到线上的html代码。
vue搭建的单页面项目有各种优点，易维护、代码简洁、开发体验好等等。但是对于一些传统的互联网公司，vue单页面却有一个很致命的问题就是seo优化的问题。下面是正常打包的vue单页面目录以及index.html的代码。

目录只有一个index.html文件并且这个html文件里面是没有任何内容的只有一个id为app的用来挂载vue实例的div。
谷歌搜索引擎已经可以很好地支持单页面的信息爬取，但是谷歌是国外的国内使用要翻墙所以不作考虑，百度是国内最主要的搜索引擎，百度并不能爬取单页面的数据所以这样的项目如果上线了别人在百度搜索的时候很难找到这个项目。由于我目前公司的大部分项目都是需要做seo优化的所以这个问题就丢到了我这里。

解决办法

这里先提一下如果打包的时候报错可能你需要npm安装一下puppeteer（这东西有点大大概300多M）

第一步通过prerender-spa-plugin来进行vue.config.js的配置

npm isntall prerender-spa-plugin --save

这个东西是vue用来将单页面应用打包成多页面的第三方插件，安装完成之后在vue.config.js配置配置如下

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const webpack =