部署Azure静态Web应用时出现Manifest语法错误

1. 修正Manifest文件的语法问题 #

你提供的Manifest代码里，"icons"这一行的双引号和其他键使用的转义引号"不统一，这是粘贴格式导致的异常。实际本地文件必须保证所有JSON键值对都使用标准双引号，不能混合转义字符或单引号。

修正后的标准JSON格式Manifest：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

2. 验证构建后的Manifest文件状态 #

部署完成后，直接访问SWA上的Manifest文件地址（例如https://你的SWA域名/manifest.json），检查返回内容：

• 如果返回HTML页面（比如404页面），说明Manifest未被正确部署到根目录，或是路径配置错误。
• 如果内容存在乱码、额外字符，说明构建过程中Manifest被错误修改。

本地先执行npm run build:dev命令，查看build目录下的manifest.json是否正常，确认构建命令能生成正确的产物。

3. 调整Azure DevOps部署管道配置 #

• 确认app_location和output_location路径：你的配置中app_location设为/、output_location设为/build，需确保build目录下确实存在manifest.json文件。
• 可以在管道中添加验证步骤，确认构建产物：

  - script: |
      ls -la build/
      cat build/manifest.json
    displayName: '检查构建产物'
  

  这一步能帮你确认管道中生成的Manifest文件是否正确。

4. 配置SWA静态文件路由 #

如果Manifest路径正确但访问异常，可能是SWA的路由规则将请求重定向到了HTML页面。在项目根目录创建staticwebapp.config.json，添加静态文件路由规则：

{
  "routes": [
    {
      "route": "/manifest.json",
      "serve": "/manifest.json",
      "statusCode": 200
    }
  ]
}

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