众所周知Nuxt服务端渲染应用部署(SSR服务器渲染)(组图)

SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法。一套代码两套执行环境,会引起各种问题,比如服务端没有、对象,处理方式是增加判断,如果是客户端才执行:感谢各位的阅读,以上就是“Vue单页面做SEO不友好有哪些解决方法,各有何特点”的内容了,经过本文的学习后,相信大家对Vue单页面做SEO不友好有哪些解决方法,各有何特点都有更深刻的体会了吧。

本文介绍了“Vue单页对SEO不友好的解决方案有哪些,各有什么特点”的相关知识。做个参考,有兴趣的朋友跟着小编一起看看吧。

众所周知,Vue SPA单页应用对SEO并不友好,当然也有相应的解决方案。通过搜索信息,大约有以下4种方法。 (我只使用了第一个和第三个选项)

1.Nuxt服务端渲染应用部署(SSR服务端渲染)

关于服务端渲染:vue官网介绍,vue版本有要求,服务端有一定要求,需要环境支持。

使用 SSR 的权衡:

受限于开发条件,浏览器专用代码只能在一些生命周期钩子函数(hook)中使用;一些外部扩展库 ( ) 可能需要特殊处理才能在服务器呈现的应用程序中运行;

环境和部署要求较高,需要Node.js运行环境;

在高流量的情况下,为相应的服务器负载做好准备,并明智地使用缓存策略。

优点:

更好的 SEO,因为搜索引擎爬虫可以直接查看完全呈现的页面;

更快的内容到达时间(time-to-),尤其是对于慢速网络条件或慢速设备。

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

1.一套代码,两套执行环境,会造成各种问题,比如没有服务器,没有对象,处理方法是增加判断,只有客户端才执行:

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

引用带有dom操作的npm包,如:不能用,改用:

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

2.Nuxt方法,在初始化页面前获取数据,但仅限页面组件调用:

// 并发加载多个接口: 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,  } }

3.如果使用v-if语法,在线部署时也可能会遇到这个错误:

app : to ” on ‘Node’: 这个节点类型不是这个。

在 .We [as ]

根据关于 nuxt 的提示 #1552,将 v-if 更改为 v-show 语法。

2.Nuxt 静态应用部署

Nuxt.js 执行静态打包时忽略动态路由。

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

动态路由需要先生成一个静态页面。需要指定动态路由参数的值,并在数组中配置。

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

运行打包,可以看到打包好的页面。

但是如果路由动态参数的值是动态的而不是固定的呢?

使用返回对象类型的函数;

使用回调为 (err, ) 的函数。

// nuxt.config.jsimport axios from 'axios' export default { generate: { routes: function () {  return axios.get('https://my-api/users')  .then((res) => {  return res.data.map((user) => {   return {   route: '/users/' + user.id,   payload: user   }  })  }) } }}

现在我们可以像这样从 //_id.vue 访问:

async asyncData ({ params, error, payload }) { if (payload) return { user: payload } else return { user: await backend.fetchUser(params.id) }}

如果你的动态路由有很多参数,比如产品详情,可能高达几万。需要一个接口返回所有的ID,然后在打包的时候遍历ID,打包到本地。如果产品被修改或从货架上移除,则需要重新包装。在产品多的情况下,包装也很慢,很不现实。

优点:缺点:

vue页面优化_vue单页面怎么优化seo_vue单页面和多页面

3.预渲染-spa-

如果您只是使用它来改善一些营销页面(例如 /、/、/ 等)的 SEO,那么您可能需要预渲染。与其使用 Web 服务器动态编译 HTML,不如使用预渲染在构建时(时间)简单地为特定路由生成静态 HTML 文件。优点是更容易设置预渲染,并且可以将您的前端作为一个完全静态的站点。

$ cnpm install prerender-spa-plugin --save

vue cli 3 vue..js 配置:

const PrerenderSPAPlugin = require('prerender-spa-plugin');const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;const path = require('path');module.exports = { configureWebpack: config => {  if (process.env.NODE_ENV !== 'production') return;  return {   plugins: [    new PrerenderSPAPlugin({     // 生成文件的路径,也可以与webpakc打包的一致。     // 下面这句话非常重要!!!     // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。     staticDir: path.join(__dirname,'dist'),     // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。     routes: ['/', '/product','/about'],     // 这个很重要,如果没有配置这段,也不会进行预编译     renderer: new Renderer({      inject: {       foo: 'bar'      },      headless: false,      // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。      renderAfterDocumentEvent: 'render-event'     })    }),   ],  }; }}

在main.js中添加:

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

注意:mode: “” 必须设置在 .

打包查看文件,打包出文件夹 /.html ,例如:=> /.html ,里面包含html内容。

优点:

变化不大,只要引入一个插件就搞定了;

不足:

不能使用动态路由;

只适用于页数较少的项目。当有数百页时,打包会很慢;

4. 爬虫处理

它是一个基于内核的无头浏览器,即没有UI界面,也就是它是一个浏览器,但是里面的点击、翻页等与人相关的操作需要编程。

虽然“宣布终止开发”,但Vue的SEO处理已经得到满足。

这个解决方案实际上是一种旁路机制。原理是通过配置判断访问的源UA是否为爬虫访问。如果有,将搜索引擎的爬虫请求转发给一个节点,然后解析完整的HTML,返回给爬虫。

安装全局、本地、测试:

$ phantomjs spider.js 'www.baidu.com'

如果你在命令行上看到一个 html 推送,那么恭喜你,你已经征服了。

启动后或者在请求头中使用增加User-值,效果是一样的。

在线部署

在线安装node、pm2及相关配置:

upstream spider_server { server localhost:3000;} server { listen  80; server_name example.com;   location / {  proxy_set_header Host   $host:$proxy_port;  proxy_set_header X-Real-IP  $remote_addr;  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {  proxy_pass http://spider_server;  } }}

优点:

完全不需要改项目代码,可以按照原来的SPA开发,开发SSR的成本应该不会太小;

对于已经使用 SPA 开发的项目,这是一个绝佳的选择。

不足:

部署需要节点服务器支持;

爬虫访问比网页访问慢,因为只有在资源定期加载时才返回爬虫;

如果被百度爬虫大量循环恶意模拟,会造成服务器负载问题。解决方法是判断访问的IP是否是百度官方爬虫的IP。

总结

如果你建的是大型网站,比如商城,不要犹豫,直接去SSR服务器渲染。当然,还有相应的坑等着你。社区更成熟,英语更好。所有问题都可以轻松解决。

如果只是个人博客,公司官网,其他三个都可以。

感谢阅读,以上是《Vue单页SEO不友好的解决方案有哪些,各有什么特点?》的内容。经过这篇文章的学习,相信大家对Vue单页SEO是不友好的。解决方案,各有什么特点,都有比较深刻的体会。这里是群英网络,小编会为大家推送更多相关知识点的文章,欢迎关注!

免责声明:本文来自网络用户投稿,不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除,本站不负任何责任及承诺。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

发表评论

登录后才能评论