使用Firebase托管实现本地化404页面

假设我的web应用程序有两个区域设置：英语（

myapp.com/en/

）和法语（

myapp.com/fr/

）。我想本地化我的404页面，这样对

myapp.com/en/non-existence

或

myapp.com/non-existence

的请求将返回404页面的英文版本，对

myapp.comm/fr/non-existence

的请求将返回法文版本

不过，Firebase主机似乎在默认情况下不提供此类功能，因为它只允许一个404页面（）

那么，有没有办法通过Firebase主机实现本地化的404页面？

这个答案已经过时了。Firebase现在默认支持此功能。看见

---

实现此功能的一种方法是使用：

这将为

/fr/404.html/

页面提供

/fr/

目录中的不匹配请求，并为任何其他不匹配请求提供

/en/404.html

这种方法的缺点是返回的状态代码是200而不是404

---

更好的解决方案是重写不匹配的请求，返回所需的404页面和404状态代码。注意，404页必须位于

functions/lib

目录中，而不是

public

此外，通过使用适当的

缓存控制

标头，您可以允许Firebase主机缓存函数的输出，这样它们就不必在每次请求404页面时都运行

Firebase配置：

{
  ...
  "hosting": {
    "rewrites": [
      {
        "source": "/fr/**",
        "function": "pageNotFoundFr"
      },
      {
        "source": "**",
        "function": "pageNotFound"
      }
    ]
  }

职能：

exports.pageNotFound=functions.https.onRequest（（req，res）=>{
res.set（“缓存控制”，“公共，最大年龄=31536000”）
res.status（404.sendFile（“en/404.html”，{root:uu dirname}）
})
exports.pageNotFoundFr=functions.https.onRequest（（req，res）=>{
res.set（“缓存控制”，“公共，最大年龄=31536000”）
res.status（404.sendFile（“fr/404.html”，{root:uu dirname}）
})

但是这种方法重复了代码，如果有更多的语言，可能会很混乱

---

最好将请求处理程序提取到函数中：

exports.pageNotFound=functions.https.onRequest（notFoundHanler（“en”））
exports.pageNotFoundFr=functions.https.onRequest（notFoundHanler（“fr”））
函数notFoundHandler（lang）{
返回函数（req、res）{
res.set（“缓存控制”，“公共，最大年龄=31536000”）
res.status（404）.sendFile（`${lang}/404.html`，{root:\uu dirname}）
}
}

---

更新：我向Firebase提交了一份多个404页面的功能请求，他们回答说这将被考虑。

这个答案已经过时。Firebase现在默认支持此功能。看见

---

实现此功能的一种方法是使用：

这将为

/fr/404.html/

页面提供

/fr/

目录中的不匹配请求，并为任何其他不匹配请求提供

/en/404.html

这种方法的缺点是返回的状态代码是200而不是404

---

更好的解决方案是重写不匹配的请求，返回所需的404页面和404状态代码。注意，404页必须位于

functions/lib

目录中，而不是

public

此外，通过使用适当的

缓存控制

标头，您可以允许Firebase主机缓存函数的输出，这样它们就不必在每次请求404页面时都运行

Firebase配置：

{
  ...
  "hosting": {
    "rewrites": [
      {
        "source": "/fr/**",
        "function": "pageNotFoundFr"
      },
      {
        "source": "**",
        "function": "pageNotFound"
      }
    ]
  }

职能：

exports.pageNotFound=functions.https.onRequest（（req，res）=>{
res.set（“缓存控制”，“公共，最大年龄=31536000”）
res.status（404.sendFile（“en/404.html”，{root:uu dirname}）
})
exports.pageNotFoundFr=functions.https.onRequest（（req，res）=>{
res.set（“缓存控制”，“公共，最大年龄=31536000”）
res.status（404.sendFile（“fr/404.html”，{root:uu dirname}）
})

但是这种方法重复了代码，如果有更多的语言，可能会很混乱

---

最好将请求处理程序提取到函数中：

exports.pageNotFound=functions.https.onRequest（notFoundHanler（“en”））
exports.pageNotFoundFr=functions.https.onRequest（notFoundHanler（“fr”））
函数notFoundHandler（lang）{
返回函数（req、res）{
res.set（“缓存控制”，“公共，最大年龄=31536000”）
res.status（404）.sendFile（`${lang}/404.html`，{root:\uu dirname}）
}
}

---

---

更新：我向Firebase提交了一份多个404页面的功能请求，他们回答说这将被考虑。

截至2020年8月12日，Firebase主机现在包括对的支持

以下是如何使用它：

在您的

公共

目录下创建一个新目录以承载这些本地化文件（例如

本地化

）

更新您的

firebase.json

文件以包含对此新目录的引用：

在

localized

目录下，创建一个名为

fr

的新目录，在那里可以添加法语

404.html

文件

运行

firebase deploy

部署您的站点，现在您的法国用户应该被重定向到正确的页面：）

---

有关国家和语言代码的更多信息，请参阅。

自2020年8月12日起，Firebase主机现在包括对的支持

以下是如何使用它：

在您的

公共

目录下创建一个新目录以承载这些本地化文件（例如

本地化

）

更新您的

firebase.json

文件以包含对此新目录的引用：

在

localized

目录下，创建一个名为

fr

的新目录，在那里可以添加法语

404.html

文件

运行

firebase deploy

部署您的站点，现在您的法国用户应该被重定向到正确的页面：）

<

// firebase.json

"hosting": {

  "public": "public",

  "ignore": [
     // ...
  ],

  "i18n": {
    "root": "/localized"  // directory that contains your "i18n content"
  }

  // ...
}