-1

我正在为 Vue 使用我自己的 SSR 样板。

https://github.com/Djancyp/luna-vue-ssr-boilerplate

所有工作正常的页面都是 SSR 渲染。我目前遇到的问题是，一旦我将 SSR 组件导入组件，它们就会失败。

服务器错误：

ReferenceError: document is not defined

我知道问题是 nodejs 服务器上不存在文档。

我的问题是如何停止在服务器上呈现任何 SSR 组件？-我试过 No-SSR 但没有快乐。

我的服务器实体.ts

import createApp from './app'
const config = require('config')
const isDev = process.env.NODE_ENV !== 'production'

export default context => {
  return new Promise((resolve, reject) => {
    console.log('what the f server')
    const s = isDev && Date.now()
    const { app, router, store } = createApp(config)

    const { url } = context
    const { fullPath } = router.resolve(url).route

    if (fullPath !== url) {
      return reject({ url: fullPath })
    }
    router.push(url)
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      console.log(matchedComponents)
      if (!matchedComponents.length) {
        console.log('what the **** mate error')
        return reject({ code: 404 })
      }
      Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({
        store,
        route: router.currentRoute
      }))).then(() => {
        isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
        const meta = (app as any).$meta()
        context.meta = meta
        context.state = store.state
        resolve(app)
      }).catch(err => {
        console.log(err)
        return reject
      })
    }, reject)
  })
}
4

2 回答 2

0

Vue-SSR在服务器端asyncData执行。serverPrefetch从您的组件中删除这些，将代码移动到created/ 'mounted' 并且它应该停止在服务器端呈现。

我的假设是您document.在asyncDataor内执行serverPrefetch。

于 2020-08-07T06:32:55.697 回答
0 
Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({
        store,
        route: router.currentRoute
      }))).then(() => {
        isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
        const meta = (app as any).$meta()
        context.meta = meta
        context.state = store.state
        resolve(app)
      }).catch(err => {
        console.log(err)
        return reject
      })
    }, reject)

问题是如果异步模板不存在，我会拒绝。

Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({
        store,
        route: router.currentRoute
      }))).then(() => {
        isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
        const meta = (app as any).$meta()
        context.meta = meta
        context.state = store.state
        resolve(app)
      }).catch(err => {
        console.log(err)
        return reject
      })
    })

这解决了问题，但需要稍微改进代码。

感谢您的帮助。

于 2020-08-07T13:32:24.750 回答