在 Express 应用中接入 Vue 2.0 服务端渲染
来源:互联网 发布:仅退款淘宝无法介入 编辑:程序博客网 时间:2024/05/16 15:32
写在前面
离 Vue 2.0
发布快有两周了,最近两天终于有空做了服务端渲染和同构的一些尝试,并实现了一个对 Vue Server Renderer
的封装,可以用更精简的代码来实现在目前的 Node.js
应用中引入 Vue 服务端渲染。
Vue 的服务端渲染支持流式输出,可以做组件级的缓存,这使得它的渲染速度也是非常快速。通过搭配新版的 vue-router
和 vuex
( 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, ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cov-X</title> {{ 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 渲染静态页)。
- Vue 2.0
- Webpack 2.1.0
- HotModuleReplacement
- Server Side Render
- Express
- 在 Express 应用中接入 Vue 2.0 服务端渲染
- 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)
- Vue服务端渲染业务入门实践
- Egg + Vue 服务端渲染工程化实现
- Egg + Vue 服务端渲染工程化建设
- Egg + Vue 服务端渲染开发指南
- vue同一solt在组件中渲染多次解决办法
- 在C#中应用MapObjects(渲染效果)
- 在C#中应用MapObjects(渲染效果)
- 在C#中应用MapObjects(渲染效果)
- vue 2.0渲染html
- axios在Vue组件中应用
- 在SDK中打开其他接入应用的解决方案
- 在SDK中打开其他接入应用的解决方案
- 在SDK中打开其他接入应用的解决方案
- 【IOS】在SDK中打开其他接入应用的解决方案
- 教您在项目中快速接入第三方应用
- 在应用中接入微信支付(V3)
- 深入理解Java:SimpleDateFormat安全的时间格式化
- Java集合学习笔记
- HOJ 2739 The Chinese Postman Problem
- sql 语句按字段去重
- Android 开发遇到的问题
- 在 Express 应用中接入 Vue 2.0 服务端渲染
- PhpSms 稳定可靠的php短信发送库
- WebStorm主题设置
- Oracle用户,权限,角色以及登录管理
- Android 每分钟广播
- Eclipse 的 Debug 介绍与技巧
- android 设计模式——观察者模式(原来如此简单)
- Anaconda使用总结
- 线程的状态