搜索引擎优化怎么做(VueSEO众所周知，VueSPA单页应用对SEO不友好)

　　搜索引擎优化怎么做(VueSEO众所周知，VueSPA单页应用对SEO不友好)

　　搜索引擎优化

　　众所周知，Vue SPA单页应用对SEO不友好，当然也有相应的解决方案。

　　1. SSR 服务端渲染

　　Vue.js 是用于构建客户端应用程序的框架。默认情况下，Vue 组件可以在浏览器中输出以生成 DOM 和操作 DOM。但是，也可以将相同的组件呈现为服务器端 HTML 字符串，将它们直接发送到浏览器，最后“激活”这些静态标签作为客户端上的完全交互式应用程序。

　　服务器渲染的 Vue.js 应用程序也可以被认为是“同构的”或“通用的”，因为应用程序的大部分代码都可以在服务器和客户端上运行。

　　权衡：优点：缺点：2. Nuxt static

　　Nuxt.js 框架，官方介绍，从头开始构建服务端渲染应用程序相当复杂。幸运的是，我们有一个优秀的社区项目 Nuxt.js，它使它变得非常简单。Nuxt 是一个基于 Vue 生态的更高层次的框架，为开发服务端渲染的 Vue 应用程序提供了极其便捷的开发体验。更酷的是，您甚至可以将其用作静态站点*敏*感*词*。

　　静态是另一种打包 Nuxt.js 的方式。它是 Nuxt.js 的创新。页面加载很快。

　　Nuxt.js 执行生成静态打包时，动态路由会被忽略。

　　如果你有很多动态路由参数，比如产品详情，可能高达几万。需要一个接口返回所有的id，然后打包时遍历id，本地打包。如果产品被修改或下架，则需要重新包装。在大批量的情况下，包装很慢，很不现实。

　　优点：不足：3.预渲染prerender-spa-plugin

　　如果你只是用它来提升几个营销页面的SEO（比如/about、/contact等），那么你可能需要进行预渲染。不需要使用web服务器实时动态编译HTML，而是使用预渲染的方式在构建时简单地为特定路由生成静态HTML文件。优点是更容易设置预渲染，并且您可以将前端用作完全静态的站点。

　　优点：不足：4.使用Phantomjs处理爬虫

　　Phantomjs 是一个基于 webkit 内核的无头浏览器，即没有 UI 界面，但是点击、翻页等与人相关的操作需要编程实现。

　　虽然“Phantomjs 宣布终止开发”，但已经满足了 Vue 的 SEO 处理。

　　这种解决方案实际上是一种旁路机制。原理是通过Nginx的配置判断访问的源UA是否是爬虫访问。如果是，则将搜索引擎的爬虫请求转发到一个节点服务端，通过Phantomjs进行完整的分析。HTML，返回给爬虫。

　　优点：缺点：总结

　　如果你搭建大型网站，比如商场，不要犹豫，直接在SSR服务器上渲染。当然，也会有相应的坑等着你。但是，社区相对成熟，所有问题都可以解决。

　　如果只是个人博客或者公司官网项目，其他三个都可以。

　　如果你想对已经用SPA开发并支持节点服务器的项目进行SEO优化，请使用Phantomjs。