部署在 github.pages 上的 Flutter Web 应用程序无法访问某些资产

Posted 2023-02-23

【中文标题】部署在 github.pages 上的 Flutter Web 应用程序无法访问某些资产

【英文标题】：flutter web app deployed on github.pages cannot access SOME assets

【发布时间】：2021-01-22 18:31:51

【问题描述】：

[使用github 上的步骤更新检查问题]

在本地运行我的 Flutter Web 应用

flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release

按预期工作 (video)，但构建它并将其部署到 github pages (here)

flutter_master build web --dart-define=FLUTTER_WEB_USE_SKIA=true --release

不访问某些资产，但成功访问其他资产。

---

我已经尝试过这些解决方案（one、two）

'about.json' 在本地按预期工作，但在部署时无法加载

而'assets/about.json' 在这两种情况下都不起作用

使用的代码可以简化为

rootBundle.loadString('about.json');

---

我仔细检查了pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - background_portrait.jpg
    - background_landscape.jpg
    - yf_icon_black.png
    - yf_logo.png
    - about.json
    - apps.json
    - news.json
    - opensource.json

以及构建文件夹中的assets

一切正常，但问题仍然存在

在这些logs 中，您可以看到这些文件存在

【问题讨论】：

当该开关/标志用于构建发布版本时，这是一个已知问题。我在 GitHub 问题之一上读过它，但不记得是哪一个。

【参考方案1】：

official flutter documentation 说明资产应该相对于 pubspec.yaml 的路径添加

对于 pubspec.yaml 的示例，您应该将资产文件移动到项目文件夹的根目录中，或者如果它们位于 assets 子文件夹中，则在 pubspec.yaml 中添加该子文件夹的名称

例如如果您的文件位于project_path/assets/ 下，则pubspec.yaml 的资产部分应类似于：

flutter:
  uses-material-design: true
  assets:
    - assets/background_portrait.jpg
    - assets/background_landscape.jpg
    - assets/yf_icon_black.png
    - assets/yf_logo.png
    - assets/about.json
    - assets/apps.json
    - assets/news.json
    - assets/opensource.json

在你的 dart 代码中，资产应该通过它们指定的键来访问，对于上面的例子，使用 'assets/about.json' 而不是 'about.json'

【参考方案2】：

对我有用的是完全消除资产文件夹。我在根目录（与 lib 相同级别）中为我的每种资产类型创建了一个文件夹，并将它们作为 pubspec.yaml 中的目录引用：

  assets:
    - json/
    - avatars/ 

然后在加载它们时，我使用了相对路径：

await rootBundle.loadString('json/structure.json');

Flutter 在构建期间创建一个资产文件夹，并将我所有的资产目录复制到其中。通过这种方式，我可以在 GitLab 页面上以调试和发布模式加载资产。

编辑：我包含用于 gitlab 页面构建管道的 gitlab.ci.yml 文件

image: registry.gitlab.com/famedly/containers/flutter-dockerimages:beta
pages:
  script:
    - flutter clean
    - flutter config --enable-web
    - flutter pub get
    - flutter build web --release
    - ls build/web
    - cp -r build/web public
    - ls public
  artifacts:
    paths:
      - public
  only:
    - master

您不需要的 ls 命令仅用于在脚本开发期间记录输出。我把它们留在那里是因为它们不会造成伤害，并且有时会派上用场。

【讨论】：

我已经使用了一个非常相似的结构，而不是“json”我称之为“数据”，但其他方面是相同的......我感觉构建只是不复制构建中的资产文件夹...

您可以使用 flutter build web --release 命令在本地检查，我编辑了我的答案并包含了我用于构建的 gitlab.ci.yml

不应该 flutter run -d chrome --release 提供运行已部署版本的相同体验吗？

我已经更新了问题，现在它显示了徽标，但不加载 json 资产

很高兴听到?