Vue-服务器端渲染（SSR）

2019-07-12 本文已影响288人夜半暖人心

Vue服务器端渲染

1. 关于vue项目的seo(搜索引擎优化)问题

2. 服务端渲染介绍：

Ⅰ. 从网页的渲染方式说起
➀前端渲染：html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改。

Snipaste_2019-07-12_11-37-28.jpg

➁服务端渲染：前端发出请求后，后端在将HTML页面返回给前端之前，先把HTML页面中的特定区域，用数据填充好，再将 完整的HTML 返回给前端。在SPA场景下，服务端渲染都是针对第一次get请求，它会将完整的html给浏览器，浏览器直接渲染出首屏，用不着浏览器端多一个AJAX请求去获取数据再渲染。

Snipaste_2019-07-12_14-06-26.jpg

Ⅱ.为什么要用服务器端渲染
优点：

更好的 SEO（搜索引擎优化），因为传统的搜索引擎只会从 HTML 中抓取数据，这会导致前端渲染的页面无法被抓取。
更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。页面首屏时间大概有80%消耗在网络上，剩下的时间在后端读取数据以及浏览器渲染，显然要优化后面的20%是比较困难的，优化网络时间是效果最明显的手段。传统的Ajax请求是先请求js再由js发起数据请求，两项时间再加上浏览器渲染时间才是首屏时间。而SSR能将两个请求合并为一个。

缺点：

更多的服务器端负载。
服务器端和浏览器环境差异带来的问题，例如document等对象找不到的问题。

Ⅲ. 如何选择

建议：如果注重SEO的新闻站点，非强交互的页面，建议用SSR；像后台管理页面这类强交互的应用，建议使用前端渲染。

3. vue的服务端渲染方式：Nuxt.js

Ⅰ. 什么是Nuxt.js:
Nuxt.js 是一个基于 Vue.js 的通用应用框架，通过对客户端/服务端基础架构的抽象组织，预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。（开箱即用）
官方地址：https://zh.nuxtjs.org/guide

Ⅱ. Nuxt安装使用

NO.	步骤描述
1.全局安装nuxt脚手架	cnpm i create-nuxt-app -g
2.创建新项目	create-nuxt-app my-nuxt-demo（项目名）
3.新项目配置	如下
4.进入新项目	cd my-nuxt-demo（项目名）
5.运行新项目	npm run dev

Snipaste_2019-07-12_14-51-12.jpg

Snipaste_2019-07-12_15-07-35.jpg

Ⅲ. Nuxt模板目录结构分析

重点关注：components、layouts、pages、plugins、nust.config.js目录及文件

Snipaste_2019-07-18_15-39-26.jpg

Ⅳ.Nuxt路由

➀.pages目录结构自动生成对应的路由配置

Snipaste_2019-07-18_16-00-55.jpg

➁路由跳转

跳转方式1.使用nuxt-link组件

注意：不能用a标签代替nuxt-link组件，虽然最终的显示效果一样，但是a标签会刷新页面

Snipaste_2019-07-18_16-08-59.jpg

跳转方式2.使用编程式导航this.$router.push（用于事件）

Snipaste_2019-07-18_16-18-24.jpg

③动态路由

Snipaste_2019-07-18_17-23-27.jpg

④路由参数校验

Nuxt.js 可以让你在动态路由对应的页面组件中配置一个validate方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。

validate(data) {
  cosole.log(data)
  return true
}

Snipaste_2019-07-23_09-43-56.jpg

⑤嵌套路由

NO.	步骤描述
1.	添加一个Vue文件，作为父组件
2.	添加一个与父组件同名的文件夹来存放子视图组件
3.	在父文件中，添加<nuxt-child></nuxt-child>组件，用于展示匹配到的子视图

Snipaste_2019-07-23_15-38-58.jpg

父组件authors.vue的demo：
<template>
    <div class="authors">
        <h3>这是作者列表页</h3>
        <ul>
            <li v-for="item in bookList" :key="item.id">
                <!-- <nuxt-link :to="`/book/${item.id}`">{{item.name}}</nuxt-link> -->
                <!-- 将传参改为传name -->
                <nuxt-link :to="`/authors/${item.id}`">{{item.name}}</nuxt-link>
            </li>
        </ul>
        <nuxt-child></nuxt-child>
    </div>
</template>
<script>
export default {
    data(){
        return{
            bookList:[
                {name:'萧鼎',id:1},
                {name:'墨香铜臭',id:2},
                {name:'番茄',id:3},
            ]
        }
    }
}
</script>



嵌套的子组件_id文件夹下的demo
<template>
    <div class="authors-detail">
        <!-- Nuxt.js 定义带参数的动态路由，需要创建
        以下划线作为前缀的Vue文件或目录，为了避免出错我们只考虑目录 -->
        <!-- 底下这个id对应左边加了下划线的文件夹名_id -->
        这是{{$route.params.id}}号作者的详细信息
    </div>
</template>
<script>
export default {
    
    // Nuxt.js 可以让你在动态路由对应的页面组件中配置一个`validate`方法用于校验动态路由参数的有效性。
    // 该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。
    validate(obj){//默认有个obj的参数
        console.log(this);
        console.log(obj.params);// { id: '诛仙' }
        return /^\d+$/.test(obj.params.id)//用正则限制只能是数字
    }
}
</script>

Ⅴ.布局组件

NO.	步骤描述
1.	去layouts文件夹下面新建一个新的layout布局组件（如 a.vue），并在这个组件中添加<nuxt />组件
2.	给需要用到a.vue的组件添加layout属性，并指定需要使用的layout(如 layout:'a')

Snipaste_2019-07-24_10-51-44.jpg

Snipaste_2019-07-24_10-54-11.jpg

特殊的布局组件：error布局组件（error是关键字，只能取这个名字）

Snipaste_2019-07-24_10-59-38.jpg

Ⅵ.设置全局样式

Snipaste_2019-07-24_11-07-07.jpg

Ⅶ.ElementUI使用

NO.	步骤描述
1.	下载(c)npm i element-ui -S（一定要在package.json里确认是否下载成功）
2.	在plugins文件夹下面，创建ElementUI.js文件
3.	在nuxt.config.js中添加系统设置
4.	测试UI组件是否生效

Snipaste_2019-07-24_19-24-07.jpg

测试的时候不要范如下错误：

Snipaste_2019-07-24_19-18-15.jpg

Ⅷ.发送请求

➀.生命周期函数：

在nuxt中，只有created以及beforeCreate两个能够在服务端正常使用

但是发异步请求不能在created生命周期函数中去发送，因为它会在前端执行（打印一下，发送前端和服务器端都会有打印信息）

Snipaste_2019-07-25_14-23-27.jpg

那么如何发送异步请求呢？

➁.asyncData的方法:可以在服务端或路由更新之前被调用, 需要注意这个函数中不能使用this

Snipaste_2019-07-25_14-42-26.jpg

③. axios的使用

NO.	步骤描述
1.	下载(c)npm install axios -S（一定要在package.json里确认是否下载成功）
2.	在plugins文件夹下面，创建axios.js文件并进行设置
3.	在nuxt.config.js中添加系统设置
4.	测试axios是否生效

Snipaste_2019-07-25_15-43-25.jpg

Ⅸ.SEO优化

➀.全局优化:在nuxt.config.js配置文件中修改

head: {
    title: '全网最好看的电影在线网站',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '韩剧、日剧、美剧，只有你想不到，没有你找不到' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

Snipaste_2019-07-31_10-17-17.jpg

➁.局部优化:去每个页面直接加入head() 方法

 head(){
        return{
            title:'豆瓣电影',
            meta:[{
                'name':'keywords',
                'content': '电影、经典电影、热映、电视剧、美剧、影评、电影院、电影票、排行、推荐'
            }]
        }
    }

Snipaste_2019-07-31_09-59-45.jpg

Ⅹ.实战项目：豆瓣电影小案例

➀.案例源码：
复制这段内容后打开百度网盘手机App，操作更方便哦
链接：https://pan.baidu.com/s/1YFdpQIGUMF28uEm8oBUfbw
提取码：iqjb

➁.获取源码后项目跑动

Snipaste_2019-07-31_10-24-51.jpg

后记：解决SEO问题不一定非得用服务端渲染来处理，特别是项目已经开发完毕，突然告诉你添加个SEO优化，这时候可以考虑vue-meta-info ，官方地址：https://github.com/muwoo/vue-meta-info

Vue-服务器端渲染（SSR）