vue-服务端渲染4:server/routers/server-render.js

240 阅读1分钟
服务端渲染 path:server/routers/server-render.js

const ejs = require('ejs')

module.exports = async (ctx, render, template) => {   //要把返回的内容写入到ctx.body里面
  ctx.headers['Content-Type'] = 'text/html'        //要返回的html内容

  const context = {url: ctx.path}        //服务端渲染的时候,传入到vue-server-render里面去
            //vue-server-render渲染完成后,插入一堆的属性,包括css路径,javascript路径

  try {
    const appString = await render.renderToString(context) //传入的context,传给server-entry

    const {title} = context.meta.inject()

    const html = ejs.render(template, {        //开始渲染
      appString,
      style: context.renderStyles(),           //生成
      scripts: context.renderScripts(),        //生成
      title: title.text()
    })
    ctx.body = html
  } catch (err) {
    console.log('render error', err)
    throw err
  }
}