一、前言

1、服务端渲染图解

                                                2、简介服务端渲染

                                                3、vue-cli脚手架项目创建，实现客户端渲染和服务端渲染

                                                4、演示demo地址：https://github.com/4561231/ssr-vue

二、主要内容

1、服务端渲染图解参照另一篇：服务端渲染和客户端渲染

2、简介服务端渲染

Vue.js是构建客户端应用程序的框架，默认情况下，可以在浏览器中输出vue组件，进行生成Dom和操作DOM, 然而，也可以将同一个组件渲染成为服务端的字符串，将他们直接发送到浏览器，最后将这些静态标记“激活”为客户端上完全可以交互的应用程序。也就是你先在前端写好组件页面，然后交到服务端，服务端需要通过他自家的某个程序插件，然后将客户端的组件生成对应的html字符串，最后发送给浏览器。然后浏览器响应出来页面。

3、 新建项目，安装依赖路，创建服务端代码

　　(1)server.js

const Vue = require('vue')

const express = require('express')();

const renderer = require('vue-server-renderer').createRenderer();

//创建vue实例

const app = new Vue({

    template:'<div>hello vue</div>'

})

//服务器渲染的核心就在于：

//通过vue-server-renderer插件的renderToString()方法，将vue实例转化为字符串插入到html中

express.get('/',(req,res)=>{

    renderer.renderToString(app, (err,html)=>{

        if(err){

            return res.state(500).end('运行错误')

        }

          //返回给浏览器一串html字符串

        res.send(`<!DOCTYPE html>

        <html lang="en">

        <head>

            <meta charset="UTF-8">

            <title>服务端渲染</title>

        </head>

        <body>

            ${html}

        </body>

        </html>`)

    })

})

express.listen(8888, ()=>{

    console.log('服务器已经启动')

})

　　(2)具体实现原理

　　(3)测试，发现响应回来的文件里面有内容，这样也说明了服务端渲染是对SEO引擎比较好的

　　（4）小结：我们使用服务端渲染是为了弥补单页面应用SEO能力不足的问题，实际上我们第一次在浏览器地址栏输入地址的时候，并且得到返回页面之后，所有的操作仍然是单页面应用在控制的，我们所做的服务端渲染，只是在平时返回单页面应用hml上增加了对应路由的页面信息，让爬虫好爬取到。

所以项目可以分为客户端渲染和服务端渲染。

4、用vue-cli项目实现服务端渲染

　　（1）npm创建项目

　　（2）npm run build的时候打包走的是webpack.prod.config.js这个文件，现在我们新建一个webpack.server.config.js这个文件，在服务器打包的时候走这个文件

　　package.json里面加入如下代码

"server":"webpack --config build/webpack.server.conf.js"

webapck.server.config.js添加如下代码

//引入webpack的主要配置

const webpack = require('webpack')

const merge = require('webpack-merge')

//引入webpack.base.config这个文件是依赖这个基础文件的

const base = require('./webpack.base.config')

module.exports=merge(base, {

    target:'node',//这里要写node 目的是让后端支持require语法

    entry:"./src/entry-server.js",//当你服务端在打包的时候，就会走这个入口

    output:{

        filename:'bundle.server.js',//打包后生成的文件

        libraryTarget:'commonjs2'

    },

    plugins:[]

})

　　(2)由于以前生成vue实例的方式是单例的，现在我们需要在每次请求的时候生成一个vue组件

　　在mian.js中修改

/* eslint-disable no-new */

//El:’#app相当于document.getElementbyId(‘#app’ 但是在node.js中识别不了这种语法，所以我们不能这样写

/*new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})*/

import {createRouter} from './router'

export function createApp(){
const router = createRouter();

    const app = new Vue({

        router,

        components:{App},

        template:'<App/>'

    })
return {app};

}

　　同理最好将路由也写成构造函数形式

export default createrRouter(){

  return new Router({

    mode:'history',

    routes:[

    {

      path:'/',

      name:'Home',

      component:Home

    },

    {

      path:'/about',

      name:'About',

      component:About

    },

    {

      path:'/test',

      name:'Test',

      component:Test

    }

    ]

  })

　　(3)npm run server打包生成文件，并在服务端引入客户端生成的打包文件

打包生成文件

　　在服务端引入打包生成的文件

//需要在服务端配置打包生成的客户端文件

const createApp = require('./dist/bundle.server.js')['default']

　　(4)服务端拿到客户端打包生成的文件，进行处理

const Vue = require('vue')

const express = require('express')();

//需要在服务端配置打包生成的客户端文件

const createApp = require('./dist/bundle.server.js')['default']

const renderer = require('vue-server-renderer').createRenderer();

//服务器渲染的核心就在于：

//通过vue-server-renderer插件的renderToString()方法，将vue实例转化为字符串插入到html中

express.get('*',(req,res)=>{

    const context = {url:req.url};

    createApp(context).then(app=>{//这个app就是刚刚打包之后的app

          renderer.renderToString(app, (err,html)=>{

        if(err){

            return res.state(500).end('运行错误')

        }

          //返回给浏览器一串html字符串

        res.send(`<!DOCTYPE html>

        <html lang="en">

        <head>

            <meta charset="UTF-8">

            <title>服务端渲染</title>

        </head>

        <body>

            ${html}

        </body>

        </html>`)

    })

    })//取到entry.js里面的

})

express.listen(8888, ()=>{

    console.log('服务器已经启动')

})

　　（5）测试看到一开始请求的时候就会出现内容，可以看到服务器返回的html文件中，已经有对应页面的SEO信息了。

但是，还没有成功，因为现在反回过来的只是一个页面对应信息，如果你现在切换路由又会对服务器发送一次请求，单页面应用还没成功。但是vue的特点就是利用单页面，

接下来需要配置客户端渲染

　　（1）在package.json中配

 "client"： "webpack --config build/webpack.client.conf.js"

　　(2)新建webpack.client.conf.js

const webpack = require('webpack')

const path = require('path')

function resolve(dir){

  return path.join(__dirname,'..',dir)

}

module.exports={

  entry:"./src/entry-client.js",//打包时走这个文件

  output:{

    path:path.resolve(__dirname,'../dist'),

    publicPath:'/dist/',

    filename:'bundle.client.js'

  },

  plugins:[],

  resolve:{

    extensions:['.js','.vue','.json'],

    alias:{

      'vue$':'vue/dist/vue.esm.js',

      '@':resolve('src'),

    }

  },

  module: {

    rules: [

      {

        test: /\.vue$/,

        loader: 'vue-loader',

        options: {

          compilerOptions:{

            preserveWhitespace:false

          }

        }

      },

      {

        test: /\.js$/,

        loader: 'babel-loader',

        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

      }

    ]

  }

}

　　（3）entry-client.js

//客户端也要创建，因为客户端渲染和服务端渲染是两个不同的vue实例

import{createApp} from './main'

const {app} =createApp();

const router =app.$router;

//这里可以拿到app了，

window.onload=function(){

    app.$mount('#app')//在window加载完成之后

}

　　(4)npm run client打包生成文件

　　（5）同样需要在服务器中添加打包的客户端文件

//客户端渲染文件

const exp = require('express');

///将静态文件目录设置为：项目根目录+/dist

express.use('/',exp.static(__dirname+'/dist'));

//客户端打包的文件

const clientBundleFileUrl = '/bundle.client.js'

//在下面的模板中用script的方式引入

<script src="${clientBundleFileUrl}"></script>

　　（6）启动服务器，测试

4、总结：

（1）要做ssr服务端渲染首先需要一个Sever entry他的作用是渲染SEO的信息

（2）如果你仅仅只有这四步操作，并没有实现单页面应用，而是每次点击的时候都会对服务端发起请求

　　（3）要实现单页面应用，需要做客户端打包，然后将客户端打包的文件混入到服务端

　　（4）单页面应用，只有第一次加载的时候才会发送请求，点击a标签的时候加载的是组件，

5、

三、总结

https://ssr.vuejs.org/zh/guide/structure.html#介绍构建步骤

https://segmentfault.com/a/1190000015964813

Vue(服务端渲染)的更多相关文章

  1. Egg + Vue 服务端渲染工程化实现

    在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...

  2. vue服务端渲染axios预取数据

    首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位 ...

  3. vue服务端渲染简单入门实例

    想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务 ...

  4. vue服务端渲染提取css

    vue服务端渲染,提取css单独打包的好处就不说了,在这里主要说的是抽取css的方法 要从 *.vue 文件中提取 CSS,可以使用 vue-loader 的 extractCSS 选项(需要 vue ...

  5. [vue] vue服务端渲染nuxt.js

    初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...

  6. 解析Nuxt.js Vue服务端渲染摸索

    本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单 ...

  7. vue服务端渲染之nuxtjs

    前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...

  8. 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  9. Vue服务端渲染和Vue浏览器端渲染的性能对比

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

随机推荐

  1. K60用IRA通过j-link下载失败，解决方法

    K60在用飞思卡尔原厂的例程时,例程编译时没有问题,但是烧写时不成功,出现以下提示,请问该如何解决这个问题?提示1.Miss or malformed flash loader specificati ...

  2. Android Intent通讯实例

    //1.拨打电话 // 给移动客服10086拨打电话 Uri uri = Uri.parse("tel:10086"); Intent intent = new Intent(In ...

  3. Hive参数

    1.hive当中的参数.变量都是以命名空间开头 2.通过${}方式进行引用,其中system.env下的变量必须以前缀开头 3.hive参数设置方式 1.修改配置文件${HIVE_HOME}/conf ...

  4. 【RL-TCPnet网络教程】第2章 嵌入式网络协议栈基础知识

    第2章        嵌入式网络协议栈基础知识 本章教程为大家介绍嵌入式网络协议栈基础知识,本章先让大家有一个全面的认识,后面章节中会为大家逐一讲解用到的协议. 基础知识整理自百度百科,wiki百科等 ...

  5. Linux(CentOS7)下远程拷贝文件，scp命令

    一.Linux版本 二.scp命令 scp [参数] [原路径] [目标路径] scp -P 22022 /home/file.war root@192.168.253.172:/home/test ...

  6. windows最简单的局部截图工具

    大家写博客的时候应该经常要用截图吧!不知道大家用的都是什么截图工具. 1.最开始我只会键盘的printscreen截图,然后去电脑,附件,画图....总之很多步骤,贼麻烦. 2.然后用电脑玩qq的时候 ...

  7. 浅析CompareAndSet(CAS)

    最近无意接触了AtomicInteger类compareAndSet(从JDK5开始),搜了搜相关资料,整理了一下 首先要说一下,AtomicInteger类compareAndSet通过原子操作实现 ...

  8. golang 日期时间处理

    package main import ( "fmt" "time" ) func main() { fmt.Println(time.Now()) //显示时 ...

  9. 毕业设计(2):基于MicroPython的家庭可燃气体泄露微信报警器

    在我们平时的生活中,经常看到因气体泄漏发生爆炸事故的新闻.房屋起火.人体中毒等此类的新闻报道层出不穷.这种情况下,人民就发明了可燃气体报警器.当工业环境.日常生活环境(如使用天然气的厨房)中可燃性气体 ...

  10. IP防护等级简介

    IP(INGRESS PROTECTION)防护等级系统是由IEC(INTERNATIONAL ELECTROTECHNICAL COMMISSION)所起草,将电器依其防尘防湿气之特性加以分级 IP ...