Open Genzhen opened 3 years ago
每日一题会在下午四点在交流群集中讨论，五点小程序中更新答案 欢迎大家在下方发表自己的优质见解 二维码加载失败可点击 小程序二维码
众所周知，Vue SPA 单页面应用对 SEO 不友好，当然也有相应的解决方案
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。
权衡之处：
优势：
不足：
Nuxt.js 框架，官方是这样介绍的。从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。
静态化是 Nuxt.js 打包的另一种方式，算是 Nuxt.js 的一个创新点，页面加载速度很快。
注意：在 Nuxt.js 执行 generate 静态化打包时，动态路由会被忽略。
如果你只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。
Phantomjs 是一个基于 webkit 内核的无头浏览器，即没有 UI 界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。
虽然“PhantomJS 宣布终止开发”，但是已经满足对 Vue 的 SEO 处理。
这种解决方案其实是一种旁路机制，原理就是通过 Nginx 配置，判断访问的来源 UA 是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个 node server，再通过 PhantomJS 来解析完整的 HTML，返回给爬虫。
如果构建大型网站，如商城类，别犹豫，直接上 SSR 服务器渲染，当然也有相应的坑等你，社区较成熟，英文好点，一切问题都迎刃而解。
如果只是个人博客、公司官网这类，其余三种都可以。
如果对已用 SPA 开发完成的项目进行 SEO 优化，而且支持 node 服务器，请使用 Phantomjs。
扫描下方二维码，收藏关注，及时获取答案以及详细解析，同时可解锁800+道前端面试题。
Vue SEO 几种方案
众所周知，Vue SPA 单页面应用对 SEO 不友好，当然也有相应的解决方案
1.1 SSR 服务器渲染
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。
权衡之处：
优势：
不足：
1.2 Nuxt 静态化
Nuxt.js 框架，官方是这样介绍的。从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。
静态化是 Nuxt.js 打包的另一种方式，算是 Nuxt.js 的一个创新点，页面加载速度很快。
优势：
不足：
1.3 预渲染 prerender-spa-plugin
如果你只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。
优势：
不足：
1.4 使用 Phantomjs 针对爬虫做处理
Phantomjs 是一个基于 webkit 内核的无头浏览器，即没有 UI 界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。
虽然“PhantomJS 宣布终止开发”，但是已经满足对 Vue 的 SEO 处理。
这种解决方案其实是一种旁路机制，原理就是通过 Nginx 配置，判断访问的来源 UA 是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个 node server，再通过 PhantomJS 来解析完整的 HTML，返回给爬虫。
优势：
不足：
1.5 总结
如果构建大型网站，如商城类，别犹豫，直接上 SSR 服务器渲染，当然也有相应的坑等你，社区较成熟，英文好点，一切问题都迎刃而解。
如果只是个人博客、公司官网这类，其余三种都可以。
如果对已用 SPA 开发完成的项目进行 SEO 优化，而且支持 node 服务器，请使用 Phantomjs。