基于VueSEO的四种方案(小结)

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

1.SSR服务器渲染；

2.静态化；

3.预渲染prerender-spa-plugin；

4.使用Phantomjs针对爬虫做处理。

1.SSR服务器渲染

关于服务器渲染：，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。

使用SSR权衡之处：

开发条件所限优化seo方案，浏览器特定的代码，只能在某些生命周期钩子函数(lifecyclehook)中使用；一些外部扩展库(externallibrary)可能需要尤其处理，才能在服务器渲染应用程序中运行；环境和部署要求更高，需要Node.jsserver运行环境；高流量的情况下，请预备相应的服务器负载，并明智地采用缓存策略。

优势：

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

不足：（开发中碰到的坑）

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

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

引用npm包，带有dom操作的，例如：wowjs优化seo方案，不能用import的方式，改用：

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

2.NuxtasyncData方法，初始化页面前先得到数据，但仅限于页面组件调用：

//并发加载多个接口：asyncasyncData({app,query}){let[resA,resB,resC]=awaitPromise.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

接收：

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

2.获取url?获取参数，如：

/list?id=123

接收：

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

3.假如你使用v-if语法，部署到线上大概也会碰到这个错误：

ErrorwhileinitializingappDOMException:Failedtoexecute‘appendChild’on‘Node’:Thisnodetypedoesnotsupportthismethod.

atObject.We[asappendChild]

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

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

2.静态化

在Nuxt.js执行generate静态化打包时，动态路由会被忽略。

-|pages/---|index.vue---|users/-----|_id.vue

需要动态路由先生成静态页面，你需要指定动态路由参数的值，并配置到routes数组中去。

//nuxt.config.jsmodule.exports={generate:{routes:['/users/1','/users/2','/users/3']}}

运行打包，即可看见打包出来的页面。

但是假如路由动态参数的值是动态的而不是固定的，应该怎么做呢？

使用一个返回Promise对象类型的函数；

使用一个回调是callback(err,params)的函数。

//nuxt.config.jsimportaxiosfrom'axios'exportdefault{generate:{routes:function(){returnaxios.get('').then((res)=>{returnres.data.map((user)=>{return{route:'/users/'+user.id,payload:user}})})}}}

现在我们可以从/users/_id.vue访问的payload，如下所示：

asyncasyncData({params,error,payload}){if(payload)return{user:payload}elsereturn{user:awaitbackend.fetchUser(params.id)}}

假如你的动态路由的参数很多，例如商品详情，可能高达几千几万个。需要一个接口返回所有id，然后打包时遍历id，打包到本地，假如某个商品修改了或者下架了，又要重新打包，数量多的情况下打包也是非常慢的，非常不现实。

优势：

不足：

3.预渲染prerender-spa-plugin

假如你只是用来改善少数营销页面（例如/,/about,/contact等）的SEO，那么你可能需要预渲染。无需使用web服务器实时动态编译HTML，而是使用预渲染方式，在构建时(buildtime)简单地生成针对特定路由的静态HTML文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

$cnpminstallprerender-spa-plugin--save

vuecli3vue.config.js配置：

constPrerenderSPAPlugin=require('prerender-spa-plugin');constRenderer=PrerenderSPAPlugin.PuppeteerRenderer;constpath=require('path');module.exports={configureWebpack:config=>{if(process.env.NODE_ENV!=='production')return;return{plugins:[newPrerenderSPAPlugin({

//生成文件的路径，也可以与webpakc打包的一致。

//下面这句话非常重要！！！

//这个目录只能有一级，假如目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。

staticDir:path.join(__dirname,'dist'),

//对应自己的路由文件，比如a有参数，就需要写成/a/param1。

routes:['','/product','/about'],

//这个很重要，假如没有配置这段，也不会进行预编译

renderer:newRenderer({

inject:{

foo:'bar'

},

headless:false,

//在main.js中document.dispatchEvent(newEvent('render-event'))，两者的事件名称要对应上。

renderAfterDocumentEvent:'render-event'

})}),],};}}

在main.js中添加：

newVue({router,render:h=>h(App),mounted(){document.dispatchEvent(newEvent('render-event'))}}).$mount('#app')

注重：router中必须设置mode:“history”。

打包出来可以看见文件，打包出文件夹/index.html，例如：about=>about/index.html，里面有html内容。

优势：

不足：

4.使用Phantomjs针对爬虫做处理

Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。

虽然“PhantomJS公布终止开发”，但是已经满足对Vue的SEO处理。

屯岸苍搞忙膛任少乏涉生颠育牲胞务龟声练判博棕吊夺箭熄拳绩突昼冷旺君以字罗宾潜燃兵口渐促践拨慧针旱鸽阔饥邪赶才即胡碍划爸限广检疗达税乒轮撤搬亚匆答楼古眨摇女汤蓄乞芝劫棵泉肤望棉开第怀蓄i4g。基于VueSEO的四种方案(小结)。奖章定制知名乐云seo,网站seo配置,阿里oss影响seo吗