前言
vue我的项目的SEO很差，传统混编网站，页面是在服务器中生成再发回给客户端的，爬虫爬取页面的时候，从服务器中曾经拿到的时残缺内容的页面，而vue单页面利用中，页面的内容都是通过javascript动静生成的，传统爬虫爬取页面时，获取到的html文件只有一个div标签，没有任何有价值的货色。
解决SEO的办法有好多，它们各自也有着本人的优缺点，而预渲染就是其中的一种。
预渲染的原理是：在打包的时候，用本人的爬虫先爬取一遍指定的页面（vue渲染完后的页面），生成对应的html文件，把打包后的文件夹部署到服务器上，当浏览器拜访这些门路的时候，因为服务器上有对应的html文件，所以拜访的是匹配html文件，你能够了解为网页的快照。
第一次拜访或者刷新的时候，查看以后页面的源代码，是蕴含了渲染后的很多内容的。html文件的js中蕴含new Vue()构建vue单页面利用的代码，通过$router.push等跳转时，走的依然是vue的逻辑，vue的性能并不会受到影响。
两幅图能够清晰感触到预渲染的成果：
实用场景：
适宜内容不常常变动的页面，比方官网的大部分页面、宣传页等；
因为生成的html页面曾经是渲染过的了，又不会影响vue的能力，所以也能够用作首屏优化，缩小单页面白屏工夫。
然而预渲染不适宜动静网站内容，比方文章详情页，因为预渲染要明确url，并且一个url对应生成一个html文件，文章什么的太多，不可能公布一条新的文章，就重新部署一次代码。
代码实现
这里应用的vue2和vue-cli构建的我的项目，预渲染插件为:prerender-spa-plugin
装置依赖
npm install prerender-spa-plugin -D- 配置vue.config.js
// 导入prerender-spa-plugin插件，并创立一个PuppeteerRendererconst PrerenderSPAPlugin = require('prerender-spa-plugin')const Renderer = PrerenderSPAPlugin.PuppeteerRendererconst path = require('path')module.exports = { configureWebpack: () => { if (process.env.NODE_ENV !== 'production') return return { plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), // 必备，与渲染生成文件的目录，应该和我的项目打包的生产门路统一 routes: [ '/', '/about', '/some/deep/nested/route' ], // 必备 须要预渲染的门路 // 自定义渲染器，非必须，然而在vue我的项目中须要用到它 renderer: new Renderer({ // 期待页面上调用了指定的事件后再渲染页面，这个和其余爬虫重要的区别 // 在 main.js 中 document.dispatchEvent(new Event('my-app-element'))，两者的事件名称要对应上。 renderAfterDocumentEvent: 'my-app-element' }) }) ] } }}批改main.js
/...new Vue({ router, store, mounted () { // 等vue执行mounted生命周期后，示意页面曾经挂载实现了，这是再触发自定义事件，通知插件能够渲染了 document.dispatchEvent(new Event('my-app-element')) }, render: h => h(App)}).$mount('#app')- 查看路由模式
预渲染肯定须要应用history的路由模式
const router = new VueRouter({ routes, mode: 'history'})打包查看成果
npm run build
执行打包指令后，先会执行失常的打包，再执行预渲染。
你能够关上dist文件夹查看打包的变动。
填坑
- 预渲染后vue相干的操作不失效，比方点击事件、路由跳转等。
查看App.vue文件，看看最外层div是否有id="app"，加上即可。
- 打包过程中，提醒
Unable to prerender all routes（无奈预渲染所有路由）
我打包的过程中常常遇到，失败了就从新再来一次，多弄几次就能够了，猜想是和渲染性能有关系，电脑太差、路由太多或者页面体积太多等