一、vue单页面应用SEO不行的原因？
搜索引擎抓取页面的前提是 html 含有被抓取内容，我们不妨看看基于 vue 的线上 SPA 页面请求时返回了什么：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>iDareX敢玩</title> 6 <meta name=keywords content="敢玩, iDareX, 敢玩TV, 敢玩活动, 敢玩自频道, 敢玩主题, 户外, 极限运动, 周边游, 探险, 时尚, 新潮, 运动视频, 体育, 新奇, 生活方式, 刺激, 惊险, 户外装备, 达人, 90后"> 7 <meta name=description content=自2014年10月创办以来，敢玩专注于极限户外和娱乐体育。从顽童、玩具、玩法三个方面，产出更专注于‘玩’的内容，已打造了一系列深受喜爱的娱乐体育真人秀和引爆网络的运动视频。!> 8 <meta name=renderer content=webkit> 9 <meta name=force-rendering content=webkit> 10 <meta name=viewport content="width=1140"> 11 <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"> 12 <link rel="shortcut icon" href=static/favicon.ico type=image/x-icon> 13 <link href=/static/css/app.eef5b81a3d1bee5054a791f452a34147.css rel=stylesheet> 14 </head> 15 <body> 16 <div id=app></div> 17 <script type=text/javascript src=/static/js/manifest.6d0adb8f2d8884be1c03.js></script> 18 <script type=text/javascript src=/static/js/vendor.ec1cc90c9847c434ba7d.js></script> 19 <script type=text/javascript src=/static/js/app.d7fd10ae7e4a68598037.js></script> 20 </body> 21 </html>
我们的组件都是这个 html 文件返回后再渲染到 <div id=app></div> 里的。这就解释了 vue spa单页应用SEO 缺陷的原因。
二、服务端渲染SSR的概念以及为什么可以解决SEO问题
SSR:在服务端生成HTML的字符串直接发送到浏览器解析展示。
SSR优势：
1.更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。很多时候，在页面ajax请求的时候是异步的，但是抓取工具并不会异步等待数据返回，此时SSR能更好的解决这个问题。
2.更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，所以你的用户将会更快速地看到完整渲染的页面。
三、nuxt.js概念及特性
nuxt.js:基于vue的服务端渲染框架。
特性：
-
- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES6/ES7 语法支持
- 打包和压缩 JS 和 CSS
- HTML头部标签管理
- 本地开发支持热加载
- 集成ESLint
- 支持各种样式预处理器： SASS、LESS、 Stylus等等
- 支持HTTP/2 推送
四、nuxt.js 安装及项目搭建
Nuxt.js团队创建了脚手架工具 create-nuxt-app。
确保安装了npx（npx在NPM版本5.2.0默认安装了）：
npx create-nuxt-app <项目名>
安装过程step by step。