首页 > 语言 > JavaScript > 正文

基于Vue SEO的四种方案(小结)

2024-05-06 15:37:15
字体:
来源:转载
供稿:网友

前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SRR和静态化基于Nuxt来说。

1.SSR服务器渲染;
2.静态化;
3.预渲染prerender-spa-plugin;
4.使用Phantomjs针对爬虫做处理。

1.SSR服务器渲染

关于服务器渲染:Vue官网介绍 ,对Vue版本有要求,对服务器也有一定要求,需要支持nodejs环境。

使用SSR权衡之处:

    开发条件所限,浏览器特定的代码,只能在某些生命周期钩子函数 (lifecycle hook) 中使用;一些外部扩展库 (external library) 可能需要特殊处理,才能在服务器渲染应用程序中运行; 环境和部署要求更高,需要Node.js server 运行环境; 高流量的情况下,请准备相应的服务器负载,并明智地采用缓存策略。

优势:

    更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面; 更快的内容到达时间 (time-to-content),特别是对于缓慢的网络情况或运行缓慢的设备。

不足:(开发中遇到的坑)

1.一套代码两套执行环境,会引起各种问题,比如服务端没有window、document对象,处理方式是增加判断,如果是客户端才执行:

if(process.browser){ console.log(window);}

引用npm包,带有dom操作的,例如: wowjs ,不能用 import 的方式,改用:

if (process.browser) {  var { WOW } = require('wowjs');  require('wowjs/css/libs/animate.css'); }

2.Nuxt asyncData方法,初始化页面前先得到数据,但仅限于 页面组件 调用:

// 并发加载多个接口: async asyncData ({ app, query }) { let [resA, resB, resC] = await Promise.all([  app.$axios.get('/api/a'),  app.$axios.get('/api/b'),  app.$axios.get('/api/c'),  ])    return {  dataA: resA.data,  dataB: resB.data,  dataC: resC.data,  } }

在asyncData中获取参数:

1.获取动态路由参数,如:

/list/:id' ==>  '/list/123

接收:

async asyncData ({ app, query }) { console.log(app.context.params.id) //123}

2.获取url?获取参数,如:

/list?id=123

接收:

async asyncData ({ app, query }) { console.log(query.id) //123}

3.如果你使用 v-if 语法,部署到线上大概也会遇到这个错误:

Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.We [as appendChild]

根据github nuxt上的 issue第1552条 提示,要将 v-if 改为 v-show 语法。

4.坑太多,留坑,晚点更。

2.静态化

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选