Flutter Web部署到AWS Amplify后图标不显示，GitHub解决方案无效求助

第一步：修改构建命令 #

更新你amplify.yml中的build阶段命令，添加两个编译参数：

build:
  commands: 
  - flutter build web -t ./lib/main.dart --no-tree-shake-icons --web-renderer canvaskit

参数说明：

• --no-tree-shake-icons：禁止编译阶段的图标摇树优化，避免动态生成的图标引用被误删除
• --web-renderer canvaskit：指定使用CanvasKit渲染器，规避HTML渲染器下字体图标加载适配异常问题

第二步：配置静态资源MIME类型与跨域规则 #

你可以任选以下两种方式之一配置规则：

1. 在Flutter项目根目录创建customHttp.yml文件，添加以下配置：

customHeaders:
  - pattern: '**/*.ttf'
    headers:
      - key: Content-Type
        value: 'font/ttf'
      - key: Access-Control-Allow-Origin
        value: '*'
  - pattern: '**/*.woff'
    headers:
      - key: Content-Type
        value: 'font/woff'
      - key: Access-Control-Allow-Origin
        value: '*'
  - pattern: '**/*.woff2'
    headers:
      - key: Content-Type
        value: 'font/woff2'
      - key: Access-Control-Allow-Origin
        value: '*'

2. 直接在AWS Amplify控制台的「重写和重定向」页面，手动添加上述响应头规则

配置完成后重新推送代码触发Amplify构建即可生效。

可选：确认部署路径配置 #

如果你的项目部署在域名子路径下，需要在构建命令中额外添加--base-href "/你的子路径/"参数，匹配实际部署路径；根路径部署无需额外调整。

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