Flutter Web部署Firebase Hosting后Rive动画无法运行求助

实用排查与解决步骤 #

1. 确认pubspec.yaml资源配置 #

检查pubspec.yaml中的assets配置，必须正确包含rive目录，末尾斜杠不能省略（否则不会打包目录下所有文件）：

flutter:
  assets:
    - assets/rive/

2. 修正RiveAnimation资源路径 #

改用完整相对路径assets/rive/solar.riv，同时注意大小写问题——本地系统通常不区分大小写，但Firebase Hosting的文件系统严格区分，别写错文件名或路径：

SizedBox(
  width: 600 * screenWidth,
  height: 600 * screenHeight,
  child: const Hero(
    tag: 'solar',
    child: RiveAnimation.asset(
      'assets/rive/solar.riv', // 替换为完整路径
      artboard: 'Planets',
      stateMachines: ['PlanetsStat'],
      fit: BoxFit.contain,
    ),
  ),
),

3. 清理缓存后重新部署 #

Firebase Hosting易缓存旧资源，执行以下命令强制刷新：

flutter clean
flutter build web
firebase deploy --only hosting --force

4. 检查web构建产物 #

构建完成后，查看build/web/assets/rive/目录下是否存在solar.riv文件。如果缺失，说明资源未被正确打包，重新执行flutter clean和flutter build web即可。

5. 核对Firebase控制台文件 #

登录Firebase控制台，进入Hosting的文件浏览器，确认assets/rive/solar.riv已存在，且路径与代码完全一致（含大小写）。若文件未上传，可重新部署或手动上传至对应目录。

内容的提问来源于stack exchange，提问作者MD Rashed Bin Kuddus