部署后Flutter Web应用Rive动画无法显示的排查与解决

我开发的Flutter Web应用集成了Rive动画，本地localhost环境下动画显示正常，但部署到Host-Gator服务器后无法渲染。已确认服务器cPanel中存在所需文件，Rive文件本身也没问题，尝试过检查文件路径、确认资源引入方式等操作，问题仍未解决。

相关代码片段：

import 'package:rive/rive.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: const RiveAnimation.asset(
            'assets/animations/my_animation.riv',
            fit: BoxFit.contain,
          ),
        ),
      ),
    );
  }
}

可能的原因及解决方案 #

1. 服务器文件权限问题 #

• Host-Gator的cPanel默认可能限制静态资源访问权限，检查.riv文件及所在目录的权限：
  • 目录权限需设为755，文件权限设为644
  • 在cPanel文件管理器中选中对应文件/目录，右键选择「更改权限」调整

2. Flutter Web构建资源打包问题 #

• 确认构建时是否正确打包Rive资源：
  • 检查pubspec.yaml是否正确声明资源：

    assets:
      - assets/animations/my_animation.riv
    

  • 执行flutter build web后，查看build/web/assets/animations/目录下是否存在目标.riv文件，部署时需上传整个build/web目录的内容，而非仅部分文件

3. 服务器MIME类型配置缺失 #

• Rive的.riv文件需要服务器正确识别MIME类型，Host-Gator默认可能未配置：
  • 登录cPanel找到「MIME类型」选项
  • 添加新类型：
    • 扩展名：.riv
    • MIME类型：application/octet-stream 或 application/riv

4. 缓存干扰问题 #

• 浏览器或服务器缓存可能导致旧资源未更新：
  • 部署后强制刷新浏览器（Ctrl+F5），清除本地缓存
  • 在cPanel中启用「缓存管理器」清除服务器端缓存，或在.htaccess中添加缓存控制规则避免静态资源长期缓存

5. 路径大小写不匹配 #

• Host-Gator服务器文件系统区分大小写，而本地Windows环境不区分：
  • 确认代码中路径'assets/animations/my_animation.riv'的大小写与服务器上文件完全一致
  • 例如服务器文件名为My_Animation.riv，代码路径大小写不匹配会导致加载失败

内容的提问来源于stack exchange，提问作者pomoworko.com