❤
npm
Sign UpSign In

flow-vue-ssr-middleware

0.3.2 • Public • Published

基于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)
      }
  }
});

方法

openBrowser

参数：host，port

注意：此方法只有在开发模式下，才会存在

Readme

Keywords

Package Sidebar

Install

npm i flow-vue-ssr-middleware

Repository

github.com/ysk2014/node-flow-vue-ssr-middleware

Homepage

github.com/ysk2014/node-flow-vue-ssr-middleware#readme

Weekly Downloads

23

Version

0.3.2

License

ISC

Unpacked Size

10.5 kB

Total Files

6

Last publish

Collaborators

  • cluas
Try on RunKit
Report malware