Firebase 托管：功能不适用于 ServerMiddleware (Vue/Nuxt)

Question

我正在构建一个项目，该项目利用 ServerMiddleware 仅在客户端呈现某些页面（如果没有 ServerMiddleware，我找不到另一种方法来使它正常工作。刷新页面等问题...）

问题： 不幸的是，每次我尝试通过 'firebase deploy' 部署到我的 Firebase 函数时，我都会收到错误消息：

Error: Cannot find module '~/serverMiddleware/selectiveSSR.js'

如果我排除以下行，函数构建正常。据我所知，Nuxt/ Vue 不包括 ~/serverMiddleware/ 作为其构建的一部分。

这是 nuxt.config.js 中引用我的 serverMiddleware 的代码：

serverMiddleware: ['~/serverMiddleware/selectiveSSR.js']

在 Build in nuxt.config.js 中将目录或路径（如上所述）添加到文件本身也无济于事。也许我做错了？

在本地测试（而非构建）时一切正常。

请问我如何解决这个问题？

谢谢！

Answer 1

好的，对于遇到此问题的其他人，我是这样解决的。

首先，我不知道这是 Firebase Hosting 还是 Nuxt 的错（我猜是 Nuxt，但我有待更正），但这是要做的....

1) 从 nuxt.config.js

中删除对 ServerMiddleware 的任何引用

2) 添加以下内容到nuxt.config.js

modules: [
    '~/local-modules/your-module-name'
  ],

3) 在项目根目录

中创建目录~/local-modules/your-module-name

4) 在新目录中，创建一个package.json:

{
    "name": "your-module-name",
    "version": "1.0.0"
  }

和 index.js - 关键，this.addServerMiddleware 允许您调用中间件服务器端

module.exports = function(moduleOptions) {
  this.addServerMiddleware('~/serverMiddleware/')
}

5) 创建目录~/serverMiddleware

6) 将你的中间件函数添加到新目录中的 index.js:

export default function(req, res, next) {
 // YOUR CODE
  next() // Always end with next()!
}

7) 使用 "dependencies":

下的新本地模块更新 package.json

    "your-module-name": "file:./local-modules/your-module-name"

别忘了您也需要在函数目录中执行此操作，否则 Firebase 会抱怨找不到您的新模块

Firebase Hosting: Function not working with ServerMiddleware (Vue/ Nuxt)