微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

[已通过github上的步骤对问题进行了更新结帐]

在本地运行我的Flutter网络应用

Flutter run -d chrome --dart-define=FlutteR_WEB_USE_SKIA=true --release

按预期的方式工作(video),但进行构建并将其部署到github pageshere

Flutter_master build web --dart-define=FlutteR_WEB_USE_SKIA=true --release

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


我已经尝试过这些解决方案(onetwo

'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中,您可以看到这些文件存在

解决方法

对我有用的是完全消除资产文件夹。我在根目录(与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 命令仅用于在脚本开发过程中记录输出。我把它们留在那儿是因为它们没有害处,有时会派上用场。

,

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

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

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

pubspec.yaml

在您的Dart代码中,应使用资产的指定键来访问资产,对于上述示例,请使用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 而不是'assets/about.json'

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。