Flow-vue-ssr-middleware NPM

基于flow-build，创建的支持vue服务端渲染（vue-ssr）的中间件

本中间件是对vue-server-renderer封装，实现vue在服务端渲染的功能

功能

服务端渲染vue组件

说明

本中间件只支持express框，不支持koa2，未来会对koa2进行支持
本中间件是flow-build生态中的一个环节，如果想使用本中间件，请结合flow-build使用
本中间应为服务端最后一个中间件，如果在其后插入中间件，不会生效

安装

npm install --save flow-vue-ssr-middleware

使用

const fs = require('fs')
const path = require('path')
const LRU = require('lru-cache')
const express = require('express')
const favicon = require('serve-favicon')
const vueSSRMiddleware = require("flow-vue-ssr-middleware");
const resolve = file => path.resolve(__dirname, file)



const isProd = process.env.NODE_ENV === 'production'

const app = express()

const serve = (path, cache) => express.static(resolve(path), {
  maxAge: cache && isProd ? 1000 * 60 * 60 * 24 * 30 : 0
})

app.use(favicon('./public/logo-48.png'))

// static
app.use('/static', serve('./dist/static', true))

let instance = vueSSRMiddleware({
  template: resolve('./src/index.template.html'),
  context: {
    title: 'Vue 2.0'
  }
});

app.use(instance);

const port = process.env.PORT || 3000

app.listen(port, () => {
  console.log(`server started at localhost:${port}`)
  instance.openBrowser && instance.openBrowser("localhost", port);
})

参数

template

模板路径，可以参考vue-server-renderer模块下的template参数

cache

const LRU = require("lru-cache");
const vueSSRMiddleware = require("flow-vue-ssr-middleware");

let instance = vueSSRMiddleware({
  ...
  cache: LRU({
    max: 10000,
    maxAge: ...
  })
});

context

本模块继承了vue-server-renderer向模板里面插入数据的功能，本参数就是传入模板下的数据

const vueSSRMiddleware = require("flow-vue-ssr-middleware");

let instance = vueSSRMiddleware({
  template: resolve('./src/index.template.html'),
  context: {
    title: 'Vue 2.0'
  }
});

html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{{ title }}</title>
    <meta charset="utf-8">
  </head>
  <body>
  <!--vue-ssr-outlet-->
  </body>
</html>

error

添加一个错误处理中间件

let instance = vueSSRMiddleware({
  template: resolve('./src/index.template.html'),
  context: {
    title: 'Vue HN 2.0', // default title
  },
  error: (err, req, res)=> {
      if (err.code === 404) {
        res && res.status(404).send('404 | Page Not Found')
      } else {
        // Render Error Page or Redirect
        rs && res.status(500).send('500 | Internal Server Error')
        console.error(`error during render : ${req.url}`)
        console.error(err.stack)
      }
  }
});