一、前言

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. selenium+python自动化测试系列---基础知识篇（1、HTML基础知识1）

    1.什么是HTML HTML是一种描述网页的语言.HTML指超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言(markup language ...

  2. Android项目实战登录&注册

    由于项目中大部分界面都有一个后退键和一个标题栏,为避免代码冗杂以及便于利用,我们可以将后推荐和标题栏单独抽取出来定义一个标题栏布局,在 res/layout 目录下新建一个 Layout resour ...

  3. 解决在圆角手机(如小米8)上自定义Dialog无法全屏的问题

    在小米8等一系列圆角的手机上测试项目时,发现我的自定义dialog无法全屏了,这时我的dialog全屏的解决方案还是和网上大部分人是一样的 Window window = getWindow(); i ...

  4. Jmeter接口测试实战-数据传递

    Jmeter接口测试实战-数据传递 接口与接口之间没有关联的测试是缺乏意义和没有灵魂的,只有数据在不同接口之间传递才能勾画出业务场景重要的链路. 我们用较为通用的http/https协议,接口普遍返回 ...

  5. Python3 isdigit()方法

    描述 Python isdigit() 方法检测字符串是否只由数字组成. 语法 isdigit()方法语法: str.isdigit() 参数 无. 返回值 如果字符串只包含数字则返回 True 否则 ...

  6. REST教程

    REST教程 越来越多的人开始意识到,网站即软件,而且是一种新型的软件.这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high late ...

  7. c++字节对齐编译器指令#pragma

    第一种 #pragma pack(push, 1) // 先把当前对齐设置压栈,再设置为1字节对齐 struct S { char a; ]; }; #pragma pack(pop) // 恢复先前 ...

  8. Redis和MongoDB的区别(面试受用)

    项目中用的是MongoDB,但是为什么用其实当时选型的时候也没有太多考虑,只是认为数据量比较大,所以采用MongoDB. 最近又想起为什么用MongoDB,就查阅一下,汇总汇总: 之前也用过redis ...

  9. sqlplus: error while loading shared libraries: libsqlplus.so: cannot open shared object file

    sqlplus: error while loading shared libraries: libsqlplus.so: cannot open shared object file 1. 权限问题 ...

  10. MyCP.java蓝墨云班课

    题目要求: 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文本文件(内容 ...