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 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 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在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
理解JS绑定事件
2016/01/19 Javascript
js实现表格筛选功能
2017/01/18 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
javascript History对象原理解析
2020/02/17 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
一些Solaris面试题
2015/12/22 面试题
How TDD works
2012/09/30 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
企业总经理任命书
2014/06/05 职场文书
任命书标准格式
2015/03/02 职场文书
2016年教师节感言
2015/12/09 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
python lambda 表达式形式分析
2022/04/03 Python