使用 Azure 静态应用程序部署时， Angular 应用程序的路由不起作用

Question

我使用 ng build --prod 在本地生成 dist 文件夹然后我在azure中创建了一个存储帐户并打开了“静态应用程序”然后我将 dist/xxx 文件夹的内容上传到 $web 文件夹但是当我导航到任何路线时我得到

[![在此处输入图像描述][1]][1]

我尝试过的事情

1. 将 $web 设置为 blob(匿名)访问
2. 在 package.json 所在的同一级别添加了文件 staticwebapp.config.json，并再次构建并上传文件到容器
3. 使用了routes.json文件

对于我使用以下的 staticwebapp.config 文件

   {
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
}
}

和

{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
}
}

和

{
"navigationFallback": {
 "rewrite": "index.html"
}
}

通常，当其他人遇到类似问题时，他们可以导航到某个页面，并且当他们刷新时，他们会看到此问题。但就我而言，我一导航就收到此错误。[1]:/image/EqV2L.png

Answer 1

根据 Microsoft 文档，

_routes.json that was previously used to configure routing is deprecated. Use staticwebapp.config.json as described in this article to configure routing and other settings for your static web app.

Fallback routes :

针对所有静态文件请求返回 /index.html 的示例代码。

{ 
"navigationFallback": { 
"rewrite": "/index.html" } 
}

Example configuration file来自 MS 文档。

有关更多信息，请查看已修复的类似问题 here .