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，打包到本地。如果产品被修改或从货架上移除，则需要重新包装。在产品多的情况下，包装也很慢，很不现实。
优点：缺点：
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告知本站删除，本站不负任何责任及承诺。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
微信
支付宝
相关推荐
-
网站两个域名seo怎么算 用最浅显易懂的方式教大家选择适合的从头搭建一个
本篇文章为第一部分，了解如何将一个域名变成可以访问的网站的完整流程。作为个人网站来说，有自己的独立域名当然是最好的，在配置和管理上我们可以做到完全自己掌控。为例，看看是如何一步一步的搭建起我们的个人网站上查看，你会发现仓库中有了内容，这就是我们刚刚提交的个人网站代码，以后代码或文章的更新也是通过这种方式来进行。一切准备好之后，我们需要把网站部署到一个地方，同时让域名可以访问到。
-
一份SEO优化【在线版教程】，感兴趣的可先收藏
而且针对关键词以及网站内容、链接等网站整体优化，我们还精心整理了一份SEO优化【在线版教程】，感兴趣的可先收藏。关键词是什么，相信大家都知道，简单地说，就是用户在搜索框输入的内容。关键词优化首先要学会研究关键词，研究关键词能够帮助我们找到用户的搜索需求及搜索行为，然后根据自己产品属性和市场定位快速锁定目标用户。五、快速提升关键词排名技巧1、找出对用户有价值的关键词
-
阿里云模板建设的网站利于后期的seo优化排名吗
阿里云模板建设的网站利于后期的seo优化排名吗?所以，模板网站建设是否有利于seo优化大家心里有答案了吗?网友提问：阿里云购买的建站模板会不会不利于seo?微信我过几天要入职新公司了，其中有两个网站是阿里云里购买的模板建站，这种站会不会影响到优化?阿里云模板建站有哪些好处?阿里云网站建设教程：企业网站建设方法挺多，大多数人基本上会找网站建设公司建站，或企业自己进行企业网站开发，找网….
-
跨境电商内容营销者及优化站点地图的方法及注意事项
站点地图不是面向用户的，而是面向搜索引擎的。了解站点地图的重要性及优化站点地图的方法。下面就是设置网站地图、并针对SEO对其进行优化的方法。第一步是创建网站地图。这个报告将会显示：在您的站点地图中找到了多少个网址……还有哪些页面最终被建立索引。因此，如果您运行的网站有很多页面，建议将您的站点地图拆分为几个较小的站点地图。您不一定需要这些，因为和其他搜索引擎是是依赖您的XML站点地图工作的。
-
做网站SEO优化是一样的吗？如何避免过度优化
但是一切都在关注一度，做网站SEO优化是一样的。如果网站过于优化，可能会导致反作用，从而导致关键字排名下降。那么如何避免过度优化这个问题？当我们进行网站优化时，我们最好的选择是根据相应的规则进行优化。当网站有大量垃圾邮件时，用户体验必须非常差。建议您花时间撰写有意义的原创内容，这将有助于我们优化网站排名。这也是生成高质量外部链接的最佳方式，您的网站内容将为读者提供阅读的愿望。
-
为什么制作网站地图是必不可少的了？怎么制作？
网站地图（站点地图），告诉搜索引擎哪里可以抓取，为搜索引擎蜘蛛指路，增加网站重要内容页面的收录。小编用的不错的是在线生成：在百度搜索“小爬虫”即可找到在线生成网站地图。1、网站地图要包含最重要的一些页面最关键是把网站地图链接地址加入在文件中以及做好网站地图在页面方便蜘蛛抓取的位置，一般把HTML网站地图放在页眉和页脚位置。
-
网站在文章方面应该如何做好SEO？(图)
网站在文章方面应该如何做好SEO？首先，做SEO优化要有计划，计划什么关键词优化，这个月的优化任务是什么。选择合适的SEO关键词后，需要一些文章。很多公司团队都是几十人或者几百人，文章量自然会很多。一篇文章可以做一个关键词优化，标题也是最好的。发表文章最好带合适的图片，图片和文章的结合要相辅相成。企业需要先设置关键词来优化SEO。再说了，网络营销不是一种推广。
-
怎样做淘宝SEO才能有比较好的效果呢？？
谈到淘宝SEO很多卖家这两年慢慢开始忽略，虽然说现在淘宝搜索引擎的优化点没有以前那么多，但效果还是很不错的。那就是淘宝seo优化的终极目标。第一，淘宝宝贝标题优化。淘宝seo优化效果，对宝贝标题的优化需要借助于前面的数据和同行的分析。然后根据分析得到的结果为自己的产品做好标题的优化和更新工作。优化淘宝详细页面需要明确一个最大的目标，那就是能提升消费者的信任度。