Flutter Web通过Azure流水线部署时assets下.env等资源404报错怎么解决

两个报错的核心原因如下：

• Azure部署的静态站点托管规则默认会拦截文件名以.开头的隐藏文件的对外访问，即使你在pubspec.yaml中声明为资源，打包后也会被托管服务过滤无法请求到
• 字体文件404大概率是静态服务没有配置otf格式文件的MIME映射，也会被默认规则拦截

1. 修改dotenv文件命名+调整加载路径 #

不要把env文件放在assets根目录，也不要用点开头命名，按以下步骤调整：

• 在项目根目录新建config文件夹，放入改名为env_develop的配置文件（完全去掉开头的点）
• 在pubspec.yaml中声明对应路径：

assets:
  - config/env_develop

• 代码中加载env的地方改为从config/路径加载，不要走assets默认根路径：

await dotenv.load(fileName: "config/env_develop");

2. 配置Azure静态站点的文件放行规则 #

在你的Flutter Web项目的web根目录下新增staticwebapp.config.json文件（Azure静态Web应用专属配置文件），添加以下配置放行资源、配置MIME类型：

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ],
  "mimeTypes": {
    ".otf": "font/otf",
    ".env": "text/plain",
    ".develop": "text/plain"
  },
  "responseOverrides": {
    "404": {
      "rewrite": "/index.html",
      "statusCode": 200
    }
  }
}

这个配置可以同时解决Flutter Web单页应用路由刷新404、otf字体被拦截、带特殊后缀的配置文件被拦截三类问题。

3. 调整Azure流水线的打包命令 #

打包时添加--no-tree-shake-icons参数，避免图标被误裁剪导致字体文件缺失：

flutter build web --release --no-tree-shake-icons

打包完成后先确认build/web/config目录下已经存在你的env文件，再推送到Azure部署即可。

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