想到要学习vue-ssr的同学，自不必多说，一定是熟悉了vue，并且多多少少做过几个项目。然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好。

话不多说，笔者也是研究多日才搞明白这个服务端渲染到底是杂么回事！！！

一，首先实现下官网的基本案例

随便建一个目录，然后执行npm init初始化项目，生成工程文件package.json；创建server.js；然后按照vue-ssr官方链接：https://ssr.vuejs.org/zh/basic.html教程里面介绍的server.js，复制教程里面代码，如下

  1.  const Vue = require('vue')
  2.  const server = require('express')()
  3.  const renderer = require('vue-server-renderer').createRenderer()
  4.  server.get('*', (req, res) => {
  5.    const app = new Vue({
  6.      data: {
  7.        url: req.url
  8.      },
  9.      template: `<div>访问的 URL 是： {{ url }}</div>`
  10.    })
  11.    renderer.renderToString(app, (err, html) => {
  12.      if (err) {
  13.        res.status().end('Internal Server Error')
  14.        return
  15.      }
  16.      res.end(`
  17.        <!DOCTYPE html>
  18.        <html lang="en">
  19.          <head><title>Hello</title></head>
  20.          <body>${html}</body>
  21.        </html>
  22.      `)
  23.    })
  24.  })
  25.  server.listen()

显然需要按照上面引入的依赖vue，express和vue-server-renderer，安装完毕，在终端执行，node server.js，打开浏览器，http://localhost:8080/，不出意外会是乱码，因为官网的返回的html字符串里面没有 <meta charset="utf-8">，而加上这个 就好了。

当然还可以引入一个模板文件，同样是官网的案例，此时的server.js为

  1.  const Vue = require('vue')
  2.  const server = require('express')()
  3.  const renderer =  require('vue-server-renderer').createRenderer({
  4.    template: require('fs').readFileSync('./index.template.html', 'utf-8')
  5.  })
  6.  server.get('*', (req, res) => {
  7.    const app = new Vue({
  8.      data: {
  9.        url: req.url
  10.      },
  11.      template: `<div>访问的 URL 是： {{ url }}</div>`
  12.    })
  13.    renderer.renderToString(app, (err, html) => {
  14.      if (err) {
  15.        res.status().end('Internal Server Error')
  16.        return
  17.      }
  18.      res.end(html)
  19.    })
  20.  })
  21.  server.listen()

模板文件index.template.html

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.    <head><title>Hello</title></head>
  4.    <body>
  5.        <!-- 下面这个注释必须有 -->
  6.      <!--vue-ssr-outlet-->
  7.    </body>
  8.  </html>

上面注释根据官网教程，是vue注入的位置标记。然后同样执行，node server.js就可以了。

是不是很简单，还可以创建一个对象来改变模板的标题和meta，这个时候的server.js和模板文件代码分别是

  1.  const Vue = require('vue')
  2.  const server = require('express')()
  3.  const renderer =  require('vue-server-renderer').createRenderer({
  4.    template: require('fs').readFileSync('./index.template.html', 'utf-8')
  5.  })
  6.  server.get('*', (req, res) => {
  7.     const context = {
  8.      title: 'hello',
  9.      meta: `
  10.      <meta ...>
  11.      <meta ...>
  12.    `,url:req.url
  13.    }
  14.    const app = new Vue({
  15.      data: {
  16.        url: req.url
  17.      },
  18.      template: `<div>访问的 URL 是： {{ url }}</div>`
  19.    })
  20.    renderer.renderToString(app, context,(err, html) => {
  21.      if (err) {
  22.        res.status().end('Internal Server Error')
  23.        return
  24.      }
  25.      res.end(html)
  26.    })
  27.  })
  28.  server.listen()
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.    <head>
  4.        <title>{{title}}</title>
  5.        {{{meta}}}
  6.    </head>
  7.  
  8.    <body>
  9.        <!-- 下面这个注释必须有 -->
  10.      <!--vue-ssr-outlet-->
  11.    </body>
  12.  </html>

这里说下我的理解，vue服务端渲染实际是一套代码的两次应用，所谓的一套代码就是拿出server.js外面去的vm实例，上面之所以简单是因为我们在server内部创建的vm实例，一旦将vm拿出去，在server.js外部引入，那么涉及的就麻烦了。

这里分两条线说，一个是在server.js外面创建一个app.js；结果是无法引入到server中；而这个也不是关注的重点；

另一条线是使用vue-loader创建一个vm实例，然后引入到server中，整个vue渲染就在解决这个问题，解决引入的问题，解决引入之后与前端混合的问题。下面贴上简单案例的实现代码。

因为不能直接应用.vue文件以及外部的js文件，所以需要借助webpack，借助webpack将vue实例，转译为node可用代码，以及对前端代码进行转译。

二，以vue init webpack-simple vuessr0 为基础的vue-ssr案例

1）用vue-cli也就是vue脚手架建了一个简单模板，命令：vue init webpack-simple vuessr0，相信对此都比较熟悉，建好后的结构如下

之后改造一下，创建几个文件app.js,entry-client.js,entry-server.js,创建build目录，删除自动生成的webpack.config.js文件，改之后的目录结构为

各个文件的作用，entry-server.js将vm实例，转译为node可用代码；

entry-client.js和传统前端处理一致。

好吧，github链接地址为：https://github.com/mstzhen/vue-ssr；我实在有点懒了。

需要说明的是，webpack将一份文件打包为两份，前端入口文件的作用是挂载到id上面，后端入口文件以及后端文件负责注入。

首先安装依赖：npm  install；

然后依次

npm run build:client

npm run build:server

npm run dev

8080端口访问即可。

最后，本文只是对vue服务端官网最简单那个实例的实现。没有使用vue-router，没有vuex，更没有服务端数据请求。希望对正在学习vue服务端学习的小伙伴有所帮助。

错误之处，请指出。

vue服务端渲染简单入门实例的更多相关文章

  1. Vue.js 服务端渲染业务入门实践

    作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...

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

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

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

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

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

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

  5. vue服务端渲染之nuxtjs

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

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

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

  7. vue服务端渲染提取css

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

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

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

  9. Nuxt.js vue服务端渲染

    一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比 1. build后目标产物不同 vue ...

随机推荐

  1. Spring Cloud之 Config Server 使用ip端口号配置高可用

    先看官方文档的配置 --- spring: profiles: peer1 eureka: instance: hostname: peer1 client: serviceUrl: defaultZ ...

  2. 3.1 wifi网卡RT3070在S3C2440的移植和使用

    学习目标:熟悉RT3070在S3C2440的移植和使用,以及其中的相关工具的安装和使用: 一.配置内核选择WIFI驱动 1. 将usb wifi插到电脑,在ubuntu使用命令:# lsusb 查看w ...

  3. python学习——函数进阶

    首先来看下面这个函数. def func(x,y): bigger = x if x > y else y return bigger ret = func(10,20) print(ret) ...

  4. 分享一个强大的makedown编辑器

    Yosoro 官网地址 https://yosoro.coolecho.net/ 很强大,支持直接粘贴图片,是直接上传到github仓库. 可直接导出md,html,pdf格式,特别方便 找了好几天的 ...

  5. HyperLedger Fabric 1.4 简介（6.1）

    Fabric是一个提供模块化分布式账本解决方案的平台,并具备保密性.可伸缩性.灵活性和可扩展性等特性.Fabric具有可直接拔插启用和相互独立不同功能的模块,并能适应在经济社会中错综复杂的各种场景. ...

  6. python是一门解释性语言吗？

    其实这只能算说对了一半,准确来说是编译跟解释性语言.python跟java.C# 一样都是会预编译一部分代码(简称做了优化) 都知道java编译要先在cmd里敲 javac hello.world 是 ...

  7. 快速创建一个vue项目

    vue脚手架 用来创建vue项目的工具包 创建项目: npm install -g vue-cli vue init webpack VueDemo 开发环境运行: cd VueDemo npm in ...

  8. DevExpress通过girdcontrol实现分页

    简介:DevExpress中如何实现GridControl的分页功能, 主要是利用DataNavigator和GridControl组合,自定义事件实现分页功能 接下来,我们就去实现分页功能,先看下效 ...

  9. QImage对一般图像的处理

    QImage对一般图像的处理 Qt中QImage类封装了对于一般图像像素级的操作,图像显示则使用QPixmap. 本文说说对一般图像(常见格式,图像不大)的处理,比如将彩色图像处理为灰度图像.首先要获 ...

  10. 6 线程threading

    1.第1种方式:threading模块 1)单线程执行 #-*- coding:utf-8 -*- import time def main(): print("我错了...") ...