前言：

因为vue等js的数据绑定机制是用来展示页面数据的，所以爬虫获取到的html是模型页面而不是最终数据的渲染页面，搜索引擎不会回去执行请求的js 。 Vue项目都使用Ajax来请求数据。引擎爬虫在进入页面时无法获取文本内容。现在大多数解决方案都不使用Ajax来渲染数据，而是使用端侧渲染，也就是所谓的SSR。

目前基于vue的解决方案是Nuxt.js，也有同类型的Nuxt.js版本。

所以，服务器端渲染就是在服务器发送给浏览器之前，尽量保证页面上有数据可供爬虫爬取。

方法一：使用-spa-将单页面应用程序打包成多个页面

公司中有些项目需要进行一个非常重要的功能，就是SEO优化。第一次遇到这个东西，被堵了一段时间。后来咨询了很多人，都没有得到很好的解决办法。后来我用了spa-第三方插件这两个工具实现了曲线救国。

问题描述

传统的vue通过vue-cli脚手架搭建完成后，需要通过npm run打包生成，生成最终的html代码上线。

Vue构建的单页项目有各种优点，比如维护方便、代码简洁、开发体验好等。但是对于一些传统互联网公司来说，Vue单页有一个非常致命的问题，就是SEO优化。以下是正常打包的Vue单页目录和.html代码。

该目录下只有一个.html文件，并且该html文件中没有任何内容。只有一个带有app ID的div用于挂载vue实例。

搜索引擎已经可以很好地支持单页信息抓取。不过在海外和国内都用，还要翻墙，所以不考虑。百度是中国最重要的搜索引擎。百度无法抓取单页数据，所以是这样的。如果一个项目在线，别人在百度上搜索就很难找到它。由于我现在公司的大部分项目都需要SEO优化，所以这个问题就抛给了我。

解决方案

这里先提一下，如果打包的时候报错，可能需要用npm来安装（这个东西有点大，300M左右）

第一步通过-spa-配置vue..js

npm isntall prerender-spa-plugin --save

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

const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; 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'), // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。 routes: ['/','/about','/store_vuex','/cssAnimate','/connectMongoDB','/childParent','/child1','/elementUI'], // 这个很重要，如果没有配置这段，也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }) ], }; } }

然后将vue路由模式改为

最后，将此代码添加到 main.js 入口文件中。其中——应该对应vue..js中的vent

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

npm run 现在打包后的目录结构就变成这样了，还有各个文件夹的.html代码，

目前的HTML代码在.vue文件中都有相关代码，但是还有一个问题：每个文件夹中的.html代码引用了所有js和css文件，不利于SEO优化。所以事情还没有结束。

为什么有这么多js和css？因为vue-cli在打包时，每个.vue文件和标签都会被打包成对应的js和css，即使你在标签中什么都不写。

第二步，将较小的js和css文件压缩合并。

我搜索了vue-cli文档没有找到相关信息，所以我切换到了另一个。

此 API 可用于设置最小合并文件大小。将这段代码添加到上面的配置中，目测估计=1kb。

const webpack = require('webpack'); new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 10000 // 通过合并小于 minChunkSize 大小的 chunk，将 chunk 体积保持在指定大小限制以上 }),

然后npm运行

还是同一个目录，只是js和css减少了很多。

方法二、Vue SSR（服务端渲染）

简而言之，就是先在服务器上创建原本在浏览器中创建的组件，然后生成相应的HTML并直接发送到浏览器，最后在客户端“激活”这些静态标签。完全交互式的应用程序。

Vue SSR 与 SPA（单页应用）相比的优缺点 1. 优点

更好的搜索引擎优化，因为搜索引擎爬虫可以直接查看完全呈现的页面。

内容到达时间更快，特别是对于慢速网络条件或运行缓慢的设备。

2、缺点

1）受开发条件限制。浏览器特定的代码只能在某些生命周期钩子函数（）中使用；某些外部扩展库 ( ) 可能需要特殊处理才能在服务器呈现的应用程序中运行。

2) 更多涉及构建设置和部署的要求。与可以部署在任何静态文件服务器上的完全静态单页应用程序 (SPA) 不同，服务器渲染的应用程序需要位于 Node.js 运行时环境中。

3）更多的服务器端负载。在 Node.js 中渲染一个完整的应用程序显然比仅仅提供静态文件更消耗 CPU 资源，因此如果您预计在高流量环境（高）中使用它，请做好相应的准备。服务器负载，并明智地采用缓存策略。

具体SSR实现请稍后查看...