vue基于nuxt的ssr

一、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。

　　

posted @ 2018-11-20 11:35  IT民工梅西布莱恩特  阅读(104)  评论(0)  编辑  收藏  举报