Vue.js 无SSR的Vue SSR问题

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

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

所有工作精细页面均为SSR呈现。 我目前面临的问题是，只要我将SSR组件导入到组件中，就不会有任何SSR组件出现故障

服务器trow错误：

ReferenceError: document is not defined

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

我的问题是如何停止在服务器上渲染没有SSR组件？ -我没试过SSR，但没试过joy

我的服务器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)
  })
}

---

Vue SSR在服务器端执行

asyncData

和

serverPrefetch

。从组件中删除这些内容，将代码移动到

已创建的

/“已装载”，它将停止在服务器端渲染

我的假设是您正在执行

文档。

在

asyncData

或

serverPrefetch

中

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

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

---

谢谢你们的帮助。

他不用nuxt，我想不用，正如我在上面提到的，我甚至不用进口的组件。例如：假设我有一个主页，我正在将X组件导入该页面。X组件有第三部分组件，该组件不支持SSR。一旦我导入第三部分组件（从“qrcode.vue”导入QrcodeVue），服务器端就会出现文档错误。我尝试在主页上包装根组件，但没有ssr，但没有帮助。@在这种情况下，您可以在创建父组件后呈现第三方组件。一种方法是在变量设置为“已装入”的情况下执行条件渲染（v-if）。