Angular 7应用部署Azure后访问报错，请求解决方法

你的判断完全准确——问题根源就是Azure Web App默认从wwwroot目录加载站点内容，但你的Angular7项目构建产物（包括web.config和所有静态文件）都存放在dist/{APP Name}目录下，导致Azure找不到入口的index.html文件。下面是几个可行的解决办法：

方法1：调整部署流程，将构建产物直接部署到wwwroot #

这是最直接的方案，确保Angular的构建输出直接覆盖到Azure Web App的wwwroot目录：

• 如果使用GitHub部署中心：
  1. 进入你的Web App -> 部署中心 -> 配置
  2. 在「构建选项」中找到自定义部署脚本，修改构建后的文件复制逻辑，把dist/{APP Name}下的所有文件复制到wwwroot
  3. 也可以在GitHub仓库中添加deploy.sh脚本，构建完成后执行复制命令：Linux环境用cp -r dist/{APP Name}/* wwwroot/，Windows环境用xcopy dist\{APP Name}\* wwwroot\ /E /Y
• 如果使用Azure CLI部署：
  执行部署命令时直接指定构建产物目录：

  az webapp deploy --resource-group <你的资源组名> --name <你的Web App名> --src-path dist/{APP Name} --type zip
  

方法2：修改Azure Web App的路径映射，指向正确目录 #

如果不想改动部署流程，可以通过Azure Portal配置让Web App从dist/{APP Name}加载内容：

1. 进入你的Web App -> 配置 -> 路径映射
2. 在「虚拟应用程序和目录」区域点击「添加」
3. 填写配置：
   • 虚拟路径：/
   • 物理路径：Windows环境填site\wwwroot\dist\{APP Name}，Linux环境填site/wwwroot/dist/{APP Name}
4. 保存配置后重启Web App

方法3：调整Angular项目的构建输出目录 #

你还可以修改Angular CLI的配置，让构建产物直接输出到根目录的wwwroot（和旧项目保持一致路径）：

1. 打开项目根目录的angular.json文件
2. 找到projects -> {你的项目名} -> architect -> build -> options -> outputPath
3. 将其值从dist/{APP Name}改为wwwroot
4. 重新构建项目后再部署到Azure，文件就会直接出现在Web App的wwwroot目录下

另外要确认：你的web.config最终要和index.html在同一个目录下（不管是wwwroot还是dist/{APP Name}），你提供的新版Angular重写规则是有效的，只要路径匹配就能正常工作。

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