本文介绍了Vue基于NUXT的SSR，分享给大家，也给自己留个笔记。 [img]http://files.jb51.net/file_images/article/201710/2017102410373223.png[/img] [b]SSR[/b] 首先说下 SSR，最近很热的词，意为 Server Side Rendering（服务端渲染），目的是为了解决单页面应用的 SEO 的问题，对于一般网站影响不大，但是对于论坛类，内容类网站来说是致命的，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息。 抓取页面的前提是 html 含有被抓取内容，我们不妨看看基于 vue 的线上 SPA 页面请求时返回了什么 我们的组件都是这个 html 文件返回后再渲染到 [code]<div id=app></div>[/code] 里的。这就合理的解释了 SEO 缺陷的原因。 既然说到 SSR 可以解决 SEO 的问题，不难想到原理就是将我们的 html 在服务端渲染，合成完整的 html 文件再输出到浏览器。 另外 SSR 还适用以下场景 [list=1] [*]客户端的网络比较慢[/*] [*]客户端运行在老的或者直接没有 JavaScript 引擎上[/*] [/list] vue 官网给出了 SSR 原理图片 [img]http://files.jb51.net/file_images/article/201710/2017102410373324.png[/img] 对于这幅图的原理官网有详细解释，此类文章也很多，这里不赘述。 [b]NUXT[/b] 我们进入正题说下 NUXT Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by Next.js) 作用就是在 node.js 上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些规则就能轻松实现 SSR [b]安装流程[/b] Nuxt.js 团队提供了 vue-cli 的初始化模板。前提安装 vue-cli，安装过的忽略此步 完成后在需要创建的目录下执行以下 依赖安装完成后 打开浏览器 http://localhost:3000 说明：Nuxt.js 会监听 [code]pages[/code] 目录下的改变，添加新 page 的时候不需要重启服务 [b]目录结构[/b] 完成上面命令后你的目录结构会如下 [img]http://files.jb51.net/file_images/article/201710/2017102410373325.jpg[/img] Nuxt.js 给出了最简单的目录结构 也就是说，至少需要一个 page 来作为展示页。 文件的路径建议都采用绝对路径，表格如下 [img]http://files.jb51.net/file_images/article/201710/2017102410373426.jpg[/img] 例：怎么在 [code]/pages/user/me.vue[/code] 引入一个 [code]static[/code] 文件夹里的图片 [b]路由[/b] Nuxt.js 根据 pages 目录结构去生成 vue-router 配置，也就是说 pages 目录的结构直接影响路由结构 例1: 会生成 例2:隐藏路由 在文件名前加 [code]_[/code] 会生成 [b]配置文件[/b] 目录下的 [code]nuxt.config.js[/code] 是我们唯一的配置入口，这里不建议修改 [code].nuxt[/code] 目录，除非特殊需求 默认的给力我们三个配置 ·head·css·loading· 分别是头部设置，全局css，loading进度条 nuxt.config.js 的全部的配置如下,点击查看具体例子 [list=1] [*][url=https://nuxtjs.org/examples/cached-components]cache[/url][/*] [*][url=https://nuxtjs.org/examples/custom-loading]loading[/url][/*] [*][url=https://nuxtjs.org/examples/custom-routes]router[/url][/*] [*][url=https://nuxtjs.org/examples/global-css]css[/url][/*] [*][url=https://nuxtjs.org/examples/plugins]plugins[/url][/*] [*][url=https://nuxtjs.org/examples/seo-html-head]head[/url][/*] [/list] 另外还提供了 vuex 等配置，感兴趣可以去 github 和官网。 [b]NUXT 能为我们做什么[/b] 对于使用就说上面这么多（官网上都有，这里给大家一个概览），说下为什么选择 NUXT 来做 SSR 问题1：就是我们无需为了路由划分而烦恼，你只需要按照对应的文件夹层级创建 .vue 文件就行 问题2：无需考虑数据传输问题，nuxt 会在模板输出之前异步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装 问题3：内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件 还有很多便捷之处，可以尝试去写一写，读读源码 [b]总结[/b] [list=1] [*]本篇主要介绍 nuxt 的便捷之处，在使用上目前不推荐使用，几个原因：[/*] [*]文档不完善还有许多是空的，不是说我们什么信息都得不到，可以看文档的 examples，里面列举的比较全面。[/*] [/list] 目前是 0.8.0 版本，而且 README 里介绍 1.0 即将到来，可能会添加新功能，文档也会完善，待到版本稳定后再部署也不迟。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。