共计 1864 个字符，预计需要花费 5 分钟才能阅读完成。
前言
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 插件，并创立一个 PuppeteerRenderer
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const 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（无奈预渲染所有路由）
我打包的过程中常常遇到，失败了就从新再来一次，多弄几次就能够了，猜想是和渲染性能有关系，电脑太差、路由太多或者页面体积太多等
