配置Firebase Hosting多语言Angular SPA：解决刷新/直连路径404问题

你的问题核心在于Firebase托管默认会尝试查找请求路径对应的物理文件，但Angular是单页应用，所有路由路径都需要指向对应语言的index.html，由Angular前端路由处理。只需在firebase.json的hosting配置中添加重写规则即可解决：

修改后的firebase.json配置 #

{
  "hosting": {
    "public": "website/dist",
    "i18n": {
      "root": "/localized-files"
    },
    "rewrites": [
      {
        "source": "**",
        "destination": "/{lang}/index.html"
      }
    ]
    // 保留你原有的其他配置（比如headers、trailingSlash等）
  }
}

配置说明 #

• "source": "**"：匹配所有请求路径（包括根路径之外的路由，如/about、/products等）
• "destination": "/{lang}/index.html"：Firebase会自动将{lang}替换为检测到的用户偏好语言（如en_ALL、es_ALL），然后加载对应语言目录下的index.html，让Angular接管前端路由逻辑

额外检查点 #

1. 确保Angular编译时已正确将各语言版本打包到dist/localized-files下的对应目录，你的项目结构看起来符合要求
2. Angular路由建议使用PathLocationStrategy（默认配置），无需切换为哈希路由
3. 静态资源（如assets）需使用相对路径引用，确保在各语言目录下都能正常加载

内容的提问来源于stack exchange，提问作者Gonz