一、前言

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. Html5 Canvas介绍

    1. 获取绘图上下文 var mycanvas = document.getElementById('mycanvas'); var context = mycanvas.getContext('2d ...

  2. web测试之功能测试总结

    web测试是什么? web测试就是基于BS架构的软件产品的测试,通俗点来说就是web网站的测试 web功能测试包括哪些方面? 功能测试主要包括6大部分: 1.链接测试 2.表单测试 3.搜索测试 4. ...

  3. Oracle 安装步骤、安装中错误处理、完整卸载

    /*************************************************以下ORACLE服务端安装************************************* ...

  4. SQLServer之锁简介

    锁定义(Definition) 锁定是 DBMS 将访问限制为多用户环境中的行的过程. 以独占方式锁定行或列,不允许其他用户访问锁定的数据,直到锁被释放. 这可确保两个用户不能同时更新行中的同一列. ...

  5. 公钥密码RSA算法记录

    介绍: RSA算法是1978年由 R.Rivest.A.Shamir.L.Adleman提出的一种用数论构造的.也是迄今为止理论上最为成熟.完善的公钥密码体,该体制已得到广泛的应用. 算法描述: 1. ...

  6. File operations 1

    1:只读(‘r' 和 ’rb'以字节读) f = open('d:\模特主妇护士班主任.txt',mode='r',encoding='UTF-8') content = f.read() print ...

  7. selenium之元素定位-css

    CSS定位方式和XPATH定位方式基本相同,只是CSS定位表达式有其自己的格式.CSS定位方式拥有比XPATH定位速度快,且比XPATH稳定的特性.下面详细介绍CSS定位方式的使用方法 被测网页的HT ...

  8. [题解]SP703 SERVICE - Mobile Service_Done

    设计状态F[i][j][k]代表完成任务i后,有一个员工在地点P[i],其他两人分别在j和k两地.所需要的最小代价. 转移的方式: 分别考虑派遣i,j,k三人前往下一个需求地点,并更新状态. #inc ...

  9. python 提取pdf文字

    安装pdfminer 库 windows 下安装pdfminer3k pip install pdfminer3k Liunx 下安装pdfminer pip install pdfminer 代码 ...

  10. Elastic Stack-Elasticsearch使用介绍(三)

    一.前言     上一篇说了这篇要讲解Search机制,但是在这个之前我们要明白下文件是怎么存储的,我们先来讲文件的存储然后再来探究机制: 二.文档存储 之前说过文档是存储在分片上的,这里要思考一个问 ...