使用 Angular SPA 配置 Firebase Hosting i18n 的正确方法

Question

我正在尝试配置 Firebase 以托管具有多种语言的 Angular SPA。我想让 Firebase 检测首选用户语言并将其版本提供给用户。

我遵循了官方文档，它完美地服务于路径“/”，因为它服务于 index.html。如果您从根目录开始导航，它似乎工作正常，但当您刷新页面或直接输入不同的路径时，问题就来了。它返回 404.

我的 firebase.json 看起来像：

{
    "hosting": {
        "public": "website/dist",
        "i18n": {
            "root": "/localized-files"
        },
    ...
    },
    ...
}

我的项目结构是：

/website (Angular project)
    /dist (Compiled files)
         /localized-files
             /en_ALL
                 /assets
                 index.html
             /es_ALL
                 /assets
                 index.html
             /it_ALL
                 /assets
                 index.html

    /src
    ...

问题是，如何配置所有路径指向正确的 index.html。

Answer 1

如果有人遇到同样的问题，解决方法很简单：

只需在

hosting

对象中添加此设置：

    "rewrites": [
        {
            "source": "**",
            "destination": "/index.html"
        }
    ]

Firebase 应该指定此规则将重写到正确的 i18n 文件夹中的 index.html 文件。