Vue基于NUXT的SSR分析
对此感兴趣的朋友，看看idc笔记做的技术笔记！
本文介绍了Vue基于NUXT的SSR，分享给大
这篇文章主要为大家详细介绍了Vue基于NUXT的SSR分析，具有一定的参考价值，可以用来参考一下。
对此感兴趣的朋友，看看idc笔记做的技术笔记！
本文介绍了Vue基于NUXT的SSR，分享给大家，也给自己留个笔记。
【512pic.com温馨提示：图片暂缺】
SSR
首先说下 SSR，最近很热的词，意为 Server Side Rendering（服务端渲染），目的是为了解决单页面应用的 SEO 的问题，对于一般网站影响不大，但是对于论坛类，内容类网站来说是致命的，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息。
抓取页面的前提是 html 含有被抓取内容，我们不妨看看基于 vue 的线上 SPA 页面请求时返回了什么
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>iDareX敢玩</title>
<meta name=keywords content="敢玩, iDareX, 敢玩TV, 敢玩活动, 敢玩自频道, 敢玩主题, 户外, 极限运动, 周边游, 探险, 时尚, 新潮, 运动视频, 体育, 新奇, 生活方式, 刺激, 惊险, 户外装备, 达人, 90后">
<meta name=description content=自2014年10月创办以来，敢玩专注于极限户外和娱乐体育。从顽童、玩具、玩法三个方面，产出更专注于‘玩'的内容，已打造了一系列深受喜爱的娱乐体育真人秀和引爆网络的运动视频。!>
<meta name=renderer content=webkit>
<meta name=force-rendering content=webkit>
<meta name=viewport content="width=1140">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<link rel="shortcut icon" href=static/favicon.ico type=image/x-icon>
<link href=/static/css/app.eef5b81a3d1bee5054a791f452a34147.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=/static/js/manifest.6d0adb8f2d8884be1c03.js></script>
<script type=text/javascript src=/static/js/vendor.ec1cc90c9847c434ba7d.js></script>
<script type=text/javascript src=/static/js/app.d7fd10ae7e4a68598037.js></script>
</body>
</html>
我们的组件都是这个 html 文件返回后再渲染到 <div id=app></div> 里的。这就合理的解释了 SEO 缺陷的原因。
既然说到 SSR 可以解决 SEO 的问题，不难想到原理就是将我们的 html 在服务端渲染，合成完整的 html 文件再输出到浏览器。
另外 SSR 还适用以下场景
- 客户端的网络比较慢
- 客户端运行在老的或者直接没有 JavaScript 引擎上
vue 官网给出了 SSR 原理图片
【512pic.com温馨提示：图片暂缺】
对于这幅图的原理官网有详细解释，此类文章也很多，这里不赘述。
NUXT
我们进入正题说下 NUXT
Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by Next.js)
作用就是在 node.js 上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些规则就能轻松实现 SSR
安装流程
Nuxt.js 团队提供了 vue-cli 的初始化模板。前提安装 vue-cli，安装过的忽略此步
代码如下：
npm install -g vue-cli
完成后在需要创建的目录下执行以下
代码如下：
vue init nuxt/starter <project-name>
cd <project-name>
npm install
依赖安装完成后
代码如下：
npm run dev
打开浏览器 http://localhost:3000
说明：Nuxt.js 会监听 pages 目录下的改变，添加新 page 的时候不需要重启服务
目录结构
完成上面命令后你的目录结构会如下
【512pic.com温馨提示：图片暂缺】
Nuxt.js 给出了最简单的目录结构
代码如下：
|-- pages
|-- index.vue
|-- package.json
也就是说，至少需要一个 page 来作为展示页。
文件的路径建议都采用绝对路径，表格如下
【512pic.com温馨提示：图片暂缺】
例：怎么在 /pages/user/me.vue 引入一个 static 文件夹里的图片
代码如下：
<img src="~static/img/logo.png" alt="Logo"/>
路由
Nuxt.js 根据 pages 目录结构去生成 vue-router 配置，也就是说 pages 目录的结构直接影响路由结构
例1:
代码如下：
|-- pages
|-- posts
|-- index.vue
|-- welcome.vue
|-- about.vue
|-- index.vue
会生成
代码如下：
routes: [
{
path: '/posts',
component: '~pages/posts/index.vue'
}, {
path: '/posts/welcome',
component: '~pages/posts/welcome.vue'
}, {
path: '/about',
component: '~pages/about.vue'
}, {
path: '/',
component: '~pages/index.vue'
}
]
例2:隐藏路由
在文件名前加 _
代码如下：
|-- pages
|-- _about.vue
|-- index.vue
会生成
代码如下：
routes: [
{
path: '/',
component: '~pages/index.vue'
}
]
配置文件
目录下的 nuxt.config.js 是我们唯一的配置入口，这里不建议修改 .nuxt 目录，除非特殊需求
默认的给力我们三个配置 ·head·css·loading· 分别是头部设置，全局css，loading进度条
nuxt.config.js 的全部的配置如下,点击查看具体例子
- cache
- loading
- router
- css
- plugins
- head
另外还提供了 vuex 等配置，感兴趣可以去 github 和官网。
NUXT 能为我们做什么
对于使用就说上面这么多（官网上都有，这里给大家一个概览），说下为什么选择 NUXT 来做 SSR
问题1：就是我们无需为了路由划分而烦恼，你只需要按照对应的文件夹层级创建 .vue 文件就行问题2：无需考虑数据传输问题，nuxt 会在模板输出之前异步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装问题3：内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件
还有很多便捷之处，可以尝试去写一写，读读源码
总结
- 本篇主要介绍 nuxt 的便捷之处，在使用上目前不推荐使用，几个原因：
- 文档不完善还有许多是空的，不是说我们什么信息都得不到，可以看文档的 examples，里面列举的比较全面。
目前是 0.8.0 版本，而且 README 里介绍 1.0 即将到来，可能会添加新功能，文档也会完善，待到版本稳定后再部署也不迟。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持php教程。
注：关于Vue基于NUXT的SSR分析的内容就先介绍到这里，更多相关文章的可以留意
作者：喵哥笔记
