时间戳

首页 > 解决方案 > 部署在 github.pages 上的 Flutter Web 应用程序无法访问某些资产

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

问题描述

[在github上使用步骤更新结帐问题]

在本地运行我的颤振网络应用程序

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

按预期工作（视频），但构建它并将其部署到github 页面（此处）

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

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

我已经尝试过这些解决方案（一、二）

'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

以及构建文件夹中的资产

一切都检查了，但问题仍然存在

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

标签： fluttergithub-pagesassetsflutter-web

解决方案

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

  assets:
    - json/
    - avatars/

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

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

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

编辑：我包括用于 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命令仅用于在脚本开发期间记录输出。我把它们留在那里是因为它们没有害处，而且有时会派上用场。

推荐阅读