一、前言

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. 弹性布局 - flex对齐

    flex对齐 flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的. 主轴 justify-content   justify-content对齐方式共有5种对齐方 ...

  2. 2.5 Cesium视域分析的实现

    Cesium 视域分析 祝愿周末没事,技术继续分享交流,群685834990

  3. 工具资源系列之给虚拟机装个windows

    前面我们介绍了如何在 mac 宿主机安装 VMware 虚拟机软件,本节我们将继续介绍如何给虚拟机安装镜像,切换不同的操作系统. VMware 软件是容器,镜像是内核,这里的镜像指的是操作系统. 下载 ...

  4. .Net Core3 新特性/新功能 16条

    .net core 3实现了.net 标准2.1. 1.生成可执行文件 以前版本需要dotnet run运行项目,.net core 3支持直接生成目标平台的可执行文件.比如windows就是exe了 ...

  5. android – 无法解析AppCompatActivity

    用SVN获取了别人写的代码后出现 android – 无法解析AppCompatActivity 最后解决办法: 在模版的build.gradle文件中将依赖性的版本号更改了 ,同步后,再改过来就ok ...

  6. cmd黑客入侵命令大全

    nbtstat -A ip 对方136到139其中一个端口开了的话,就可查看对方最近登陆的用户名(03前的为用户名)-注意:参数-A要大写 tracert -参数 ip(或计算机名) 跟踪路由(数据包 ...

  7. 【java学习】实践中总结--持续更新中

    目录: 一些定义 配置环境 相关语法 1.一些定义 java中DO的含义: https://blog.csdn.net/canot/article/details/51698047 DAO 中包含了各 ...

  8. docker的基本知识

    Docker 是什么? Docker 是一个开源的应用容器引擎,是基于go语言的,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化. ...

  9. 多种解法解决n皇后问题

    多种解法解决n皇后问题 0x1 目的 ​ 深入掌握栈应用的算法和设计 0x2 内容 ​ 编写一个程序exp3-8.cpp求解n皇后问题. 0x3 问题描述 即在n×n的方格棋盘上,放置n个皇后,要求每 ...

  10. Windows rundll32的用法-批处理管理打印机

    用法: rundll32 printui.dll,PrintUIEntry [options] [@commandfile] /a[file] 二进制文件名 /b[name] 基本打印机名 /c[na ...