登录 | 注册

在 Express 应用中接入 Vue 2.0 服务端渲染

首页 > Web前端 > Web标准 2017-09-11 17:29:42 浏览次 共 条评论

收藏赞(分享

写在前面

Vue 2.0 发布快有两周了,最近两天终于有空做了服务端渲染和同构的一些尝试,并实现了一个对 Vue Server Renderer 的封装,可以用更精简的代码来实现在目前的 Node.js 应用中引入 Vue 服务端渲染。

Vue 的服务端渲染支持流式输出,可以做组件级的缓存,这使得它的渲染速度也是非常快速。通过搭配新版的 vue-routervuex( Vue 全家桶 大雾 ),可以实现一个既可以满足 SEO 需求 ,也如 SPA 一样交互体验流畅的前后端同构应用。

vue-hackernews-2.0 是 Vue 2.0 的同构示例项目,使用 firebase 作为数据层,实现了完全实时的 hackernews 信息流,同时还能被搜索引擎当做静态内容抓取。

vue-ssr

Use Vue 2.0 server-side rendering with Express 项目地址: vue-ssr

先上 demo

还没有做优化,只是基础使用了 lru 做了组件的缓存,服务器平均渲染时间在 40ms 左右。 http://ssr.bood.in/

安装

npm i vue-ssr --save

用法

const express = require('express')const router = express.Router()const vueRender = require('vue-ssr')// webpack server-side bundle configconst serverConfig = require('path to webpack.server.js')// create a project rendererconst indexRenderer = vueRender({    projectName: 'index',     rendererOptions: {        cache: require('lru-cache')({            max: 1000,            maxAge: 1000 * 60 * 15        })    },     webpackServer: serverConfig})// handler// 这里的静态模板只做演示,可以查看文末的实例实例代码function indexView (req, res) => {    indexRenderer(req, res, `        <html lang="en">      <head>        <meta charset="utf-8">        <title>Cov-Xtitle>        {{ STYLE }}      head>      <body>        {{ APP }}        <script src="/dist/client-bundle.js">script>      body>    html>    `)}router.get('/', indexView)router.get('/home', indexView)router.get('/article', indexView)router.get('/tag', indexView)

API

projectName

project name of webpack entries that you want to server side rendering

// webpack config...entry: {    index: ['../path to app client entry'],    dashboard: ['../path to dashboard project client entry']},...
const indexRenderer = vueRender({    projectName: 'index',    webpackServer: serverConfig})const dashRenderer = vueRender({    projectName: 'dashboard',    webpackServer: serverConfig})

rendererOptions

rendererOptions 即 Vue server renderer 的配置项

指令( directives )

声明一些自定义指令的服务端实现:

const indexRenderer = vueRender('index', {  directives: {    example (vnode, directiveMeta) {    // transform vnode based on directive binding metadata    }  }}, serverConfig)

缓存( cache )

const indexRenderer = vueRender('index', {    cache: require('lru-cache')({        max: 1000,        maxAge: 1000 * 60 * 15    })}, serverConfig)

更多信息可以参考: Why Use bundleRenderer?

webpack 服务端打包配置( webpackServer )

推荐参考 webpack.server.js

将 webpack 服务端打包配置引入到 webpackServer 就完成了。

const serverConfig = require('path to webpack.server.js')const indexRenderer = vueRender({    projectName: 'index',     webpackServer: serverConfig})

示例代码

vue-ssr-hmr-template 是一个使用了 vue-ssr 的项目脚手架,既可以使用前后端同构,也可以使用普通的 spa 模式( node 渲染静态页)。

免责声明:本文来源于,由网友提供或网络搜集,仅供个人研究、交流学习使用,不涉及商业盈利目的。如有版权问题,请联系本站管理员予以更改或删除。优知网会定期发布Web前端相关趋势文章,包括 Web标准 HTML5 CSS JS JQuery Ajax 网页特效 等领域,敬请关注!

分享到
人收藏5 收藏
 
我要评价
 
 

咨询中心

优就业微信扫一扫
微信扫一扫

400-650-7353

加入官方微博