前言：
由于使用了vue等js的数据绑定机制来展示页面数据，爬虫获取到的html是模型页面而不是最终数据的渲染页面，搜索引擎不回溯执行它请求的js。 Vue的项目都是Ajax请求数据，引擎爬虫进入页面时无法获取文本内容。现在大部分方案不使用Ajax渲染数据，而是使用端渲染，也就是所谓的SSR。
目前基于vue的方案是Nuxt.js，同类型也有Nuxt.js的React版本。
所以服务器端渲染就是在服务器发送给浏览器之前尝试在页面上渲染。有数据可以被爬虫爬取
方法一、使用-spa-将单页应用打包成多页
公司有些项目需要进行的一个很重要的功能就是SEO的优化。第一次遇到这个东西，被屏蔽了一段时间。在那之后，我去请教了很多人的建议，并没有得到很好的解决方案。后来配合-spa-第三方插件工具实现曲线救国。
问题描述
传统的vue通过vue-cli脚手架搭建后，需要通过npm run build打包生成最终的html代码放到网上。
Vue搭建的单页面项目具有易于维护、代码简洁、开发体验好等诸多优点。但是对于一些传统的互联网公司来说，Vue单页有一个非常致命的问题，就是SEO优化的问题。下面是正常打包的vue单页目录和index.html的代码。
![图片[1]-vue等js的数据绑定机制是怎么做的？-八维教育-未来可期SEO](https://www.szsinotech.com/wp-content/uploads/img/153r.jpg)
目录下只有一个index.html文件，这个html文件只包含一个app的id是用来挂载vue实例的div。
谷歌搜索引擎已经可以很好的支持单页信息爬取，但是谷歌是国外国内使用，所以不考虑，百度是国内最重要的搜索引擎网站SEO优化，百度无法爬取订单的数据页面，所以如果这样的项目在线，其他人在百度上搜索时很难找到这个项目。由于我现在公司的大部分项目都需要做SEO优化，所以这个问题抛给我了。
解决方案
这里先提一下，如果打包的时候报错，可能需要用npm安装（这个东西有点大网站SEO优化，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的路由模式改为
最后面。 js入口文件添加此代码。其中-event应该对应vue..js中的事件
new Vue({
router,
store,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
![图片[2]-vue等js的数据绑定机制是怎么做的？-八维教育-未来可期SEO](https://www.szsinotech.com/wp-content/uploads/img/110r.jpg)
npm run build 现在打包后的目录结构变成了这样，每个文件夹的index.html代码，
目前的html代码在.vue文件中有相关代码，但是还有一个问题就是每个文件夹中的index.html代码都引用了SEO优化把所有的js和css文件都去掉不好所以还没有结束。
为什么会有这么多js和css呢网站SEO优化，因为打包vue-cli的时候，每一个.vue文件和style标签都会打包成一个对应的js和css，即使你的标签里面什么都没写。
第二步，压缩合并较小的js和css文件
vue-cli文档中没有找到相关资料，于是转战
此 api 可用于设置最小组合文件大小。将此代码添加到上面的配置中，它是 10000=1kb
然后 npm 运行构建
还是同一个目录，但是js和css减少了很多。
![图片[3]-vue等js的数据绑定机制是怎么做的？-八维教育-未来可期SEO](https://www.szsinotech.com/wp-content/uploads/img/8r.jpg)
方法二、Vue SSR（服务端渲染）
简单来说就是把原本创建的组件放在浏览器上，在服务器端创建，然后生成对应的html直接发送给浏览器，最后将这些静态标签“激活”为客户端完全交互的应用程序。
Vue SSR对比SPA（单页应用）的优缺点1、优点
更好SEO，因为搜索引擎爬虫爬虫可以直接查看完全渲染的页面。
更快的内容到达时间（time-to-），尤其是对于慢速网络条件或慢速设备。
2、缺点
1）受开发条件限制。只能在某些生命周期钩子中使用的特定于浏览器的代码；一些外部扩展库 ( ) 可能需要特殊处理才能在服务器呈现的应用程序中运行。
2）涉及构建设置和部署的更多要求。与可部署在任何静态文件服务器上的全静态单页应用程序 (SPA) 不同，服务器渲染的应用程序需要 Node.js 运行时环境。
3）更多的服务器端负载。在 Node.js 中渲染一个完整的应用程序显然比仅仅提供静态文件更耗费 CPU（CPU–CPU 密集型），所以如果您预计在高流量环境（高）中使用它，请相应地准备服务器负载，并使用明智地缓存策略。
具体ssr实现请看后续…
除非注明，否则均为未来可期SEO原创文章，转载必须以链接形式标明本文链接
