Question

我正在尝试在Firebase上托管Nuxt.js应用，并且遵循了tutorial，在尝试进行{{时，我被困在＃10 1}}。我一直收到这个sudo firebase serve --only functions, hosting。

进一步调查后，我发现问题出在/functions/index.js中。由于Timed out waiting for function to respond.从未被调用，因此行nuxt.renderRoute('/').then(...)永远无法运行。 /functions/index.js的外观如下

/functions/index.js

console.log('After render')

这是我的终端输出的样子：

Answer 1

我来晚了，但是很高兴分享我的方法：

在将它与Firebase托管一起使用后，这就是我的index.js的样子。注意：我最终采用了完全不同的方法，只是使用prerendering而不是ssr在Firebase上托管我的nuxt应用程序。但是，如果您需要在项目中使用SSR，则效果很好：

const functions = require('firebase-functions')
const { Nuxt } = require('nuxt')
const express = require('express')
const admin = require('firebase-admin')

const app = express()

// Initialize Firebase (only if you use the Admin SDK, otherwise not needed)
admin.initializeApp({
  credential: admin.credential.cert(require('YOUR_KEY'))
});

// Nuxt Server Side Render Setup

const config = {
  dev: false
}

const nuxt = new Nuxt(config)

let isReady = false
const readyPromise = nuxt
  .ready()
  .then(() => {
    isReady = true
  })
  .catch(() => {
    process.exit(1)
  })

async function handleRequest(req, res) {
  if (!isReady) {
    await readyPromise
  }
  res.set('Cache-Control', 'public, max-age=1, s-maxage=1')
  await nuxt.render(req, res)
}

app.get('*', handleRequest)
app.use(handleRequest)
exports.nuxtssr = functions.https.onRequest(app)

Answer 2

您有两种方法，第一种是请求页面并基于json或api创建行为。

尝试使用：

const Nuxt = require('nuxt')
const nuxt = new Nuxt()
nuxt.build()
.then(() => {
  // here you can use nuxt.renderRoute() or nuxt.render(req, res)
});

例如：

nuxt.build()
.then(() => nuxt.renderRoute('/'))
.then(({ html, error, redirected }) => {
  // Use Html as string

  // `error` not null when the error layout is displayed, the error format is:
  // { statusCode: 500, message: 'My error message' }

  // `redirected` is not `false` when `redirect()` has been used in `data()` or `fetch()`
  // { path: '/other-path', query: {}, status: 302 }
})

第二种方法是生成路线：

app.get( '/', ( req, res, next ) => {
        doThePromise( req.query )
                .then( data => {
                        console.log( "rendering", res.renderRoute );
                        res.renderRoute( 'pages/foo', { data: data } );
                } );
} );

或者像这样简单：

app.get('/route', (req, res) => {
  res.render('foo')
})

Answer 3

您期望自己的console.log会在之后触发，但实际上，它甚至可能在调用诺言（.then之前触发。可能是您的记录器正在覆盖其输出。尝试这样写：

nuxt.renderRoute('/').then(result => {
  console.log(result.html)
  res.send(result.html)
  console.log('After render')
}).catch(e => {
  console.log(e)
  res.send(e)
})

或者使用类似的promise重写整个函数：

app.get('**', async function (req, res) {
  res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
  console.log('it still works here')

  try {
    let result = await nuxt.renderRoute('/')
    console.log(result.html)
    res.send(result.html)
  } catch (e) {
    console.log(e)
    res.send(e)
  }
  console.log('After render')
})

在Firebase上托管Nuxt.js SSR应用程序时出现问题

3 个答案: