seo vue 动态路由_基于Vue SEO的四种方案(小结)

前言：众所周知，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 语法，部署到线上大概也会遇到这个错误：