vue的SEO优化方法一(prerender-spa-plugin预渲染)
前言
vue项目的SEO很差,传统混编网站,页面是在服务器中生成再发回给客户端的,爬虫爬取页面的时候,从服务器中已经拿到的时完整内容的页面,而vue单页面应用中,页面的内容都是通过javascript动态生成的,传统爬虫爬取页面时,获取到的html文件只有一个div标签,没有任何有价值的东西。
【vue的SEO优化方法一(prerender-spa-plugin预渲染)】解决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
(无法预渲染所有路由)
推荐阅读
- 热闹中的孤独
- JAVA(抽象类与接口的区别&重载与重写&内存泄漏)
- 放屁有这三个特征的,请注意啦!这说明你的身体毒素太多
- 一个人的旅行,三亚
- 布丽吉特,人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事,我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量