在配置vue ssr 的时候调用 await renderer.renderToString(context) 报错。

大邪二号
  • 15

在配置vue ssr 服务端渲染的时候报错,对这个报错找了好久,实在不知道怎么解决,希望有大牛指点

server-render.js
const ejs = require('ejs')
module.exports = async(ctx, renderer, template) => {
  ctx.headers['Content-Type'] = 'text/html'

  const context = { url: ctx.path }
  console.log(ctx.path)
  console.log('renderer', renderer);
  try {
    const appString = await renderer.renderToString(context)
    console.log('appString', appString);
    const {
      title
    } = context.meta.inject()
    const html = ejs.render(template, {
      appString,
      title: title.text(),
      style: context.renderStyles(),
      scripts: context.renderScripts()
    })
    ctx.body = html
  } catch (err) {
    console.log('appString', 'errr');
    console.log('render error', err)
    throw err
  }
}
ssr.js
const Router=require('koa-router')
const path=require('path')
const fs=require('fs')
const VueServerRender=require('vue-server-renderer')

const serverRender=require('./server-render')

const clientManifest=require('../../public/vue-ssr-client-manifest.json')
const renderer= VueServerRender.createBundleRenderer(
  path.join(__dirname,'../../server-build/vue-ssr-server-bundle.json'),
  {
    inject:false,
    clientManifest
  }
)
console.log('renderer',renderer)
const template=fs.readFileSync(
  path.join(__dirname,'../server.template.ejs'),
  'utf-8'
)

const pageRouter=new Router()

pageRouter.get('*',async (ctx)=>{
  await serverRender(ctx,renderer,template)
})
module.exports=pageRouter
报错信息

图片描述

通过打印是renderer.renderToString(context)报错了

代码放到githunb

https://github.com/fridaydream/vue-ssr-example.git

执行命令 npm run buildnpm start之后就报错了

回复
阅读 3.6k
2 个回答
Dione
  • 4
新手上路,请多包涵

这个问题应该是在Vue文件的某些方法中,用到了document.这种js代码问题导致的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏