Vue 2.0 服务端渲染入门介绍


Posted in Javascript onMarch 29, 2017

1 什么是服务端渲染 SSR

server side render

就是通过后端吐模板,而不是通过前端ajax获取数据,拼接字符串。

2 为什么需要SSR

需要SEO,因为爬虫不会等待ajax结果。

客户端网络慢,加载速度慢,影响用户体验。

3 另一种解决办法 预渲染

不是一次性下载整个单页应用,预渲染只是在构建时为了特定的路由生成特定的几个静态页面

你用webpack可以很简单地通过prerender-spa-plugin来添加预渲染

 4 NodeJS编写Vue的SSR

首先npm install --save-dev的有 vue express vue-server-renderer

// server.js

'use strict';

var fs = require('fs');
var path = require('path');

global.Vue = require('vue')

var layout = fs.readFileSync('./index.html', 'utf8')

var renderer = require('vue-server-renderer').createRenderer()

var express = require('express')
var server = express()

server.use('/assets',express.static(
  path.resolve(__dirname,'assets')
))


server.get('*',function(req, res){

  // 将Vue实例渲染成HTML
  renderer.renderToString(
    // 创建一个应用实例
    require('./assets/app')(),

    // 处理渲染结果
    function(error, html){
      if(error){
        console.error(error);
        return res
          .status(500)
          .send('Server Error')
      }
      // 发送布局和HTML文件
      res.send(layout.replace('<div id="app"></div>', html))

    }
  )
})


server.listen(5000, function(error){
  if(error) throw errorr;
  console.log('Server is running at localhost:5000')
})
// index.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="" charset="utf-8"></script>
  <script src="/assets/vue.js" charset="utf-8"></script>
</head>
<body>

  <div id="app"></div>
  <script src="/assets/app.js" charset="utf-8"></script>
  <script type="text/javascript">app.$mount('#app')</script>


</body>
</html>
// assets/app.js

(function() {
  'use strict'
  var createApp = function() {
    return new Vue({
      template: '<div id="app">你已经在这花了 {{ counter }} 秒。</div>',
      data: {
        counter: 0
      },
      created: function() {
        var vm = this;
        setInterval(function(){
          vm.counter += 1;
        },1000)
      }
    })
  }

  // 暴露接口
  if(typeof module !== 'undefined' && module.exports) {
    module.exports = createApp
  } else {
    this.app = createApp()
  }

}).call(this)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 Javascript
vue2组件实现懒加载浅析
Mar 29 #Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 #Javascript
如何使用Bootstrap创建表单
Mar 29 #Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 #Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 #Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 #jQuery
You might like
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
python单线程实现多个定时器示例
2014/03/30 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
想学画画?python满足你!
2020/12/24 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
公务员综合考察材料
2014/02/01 职场文书
预备党员转正材料
2014/12/19 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python