Vue Проблема SSR без ssr - PullRequest
Новая
       122

Vue Проблема SSR без ssr

0 голосов
/ 06 августа 2020

Я использую свой собственный шаблон SSR для Vue. 

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

Все рабочие точные страницы - это SSR-рендеринг. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что компоненты SSR не выходят из строя, как только я импортирую их в компоненты.

server trow err: 

ReferenceError: document is not defined

Я знаю, что проблема документ не существует на сервере nodejs.

Мой вопрос: как я могу остановить рендеринг компонентов SSR на сервере? -Я пробовал No-SSR, но без радости.

my server-enty.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)
  })
}

Ответы [ 2 ]

0 голосов
/ 07 августа 2020 
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)

проблема заключалась в том, что я отклонял, если шаблон asyn c не существует. 

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
      })
    })

это решило проблему, но необходимо немного улучшить код.

Спасибо за помощь, ребята.

0 голосов
/ 07 августа 2020

Vue -SSR выполняет asyncData и serverPrefetch на стороне сервера. Удалите их из компонента, переместите код в created / 'смонтированный', и он должен прекратить рендеринг на стороне сервера.

Я предполагаю, что вы выполняете document. в asyncData или serverPrefetch.

...