部署在 github.pages 上的 flutter web 应用程序无法访问某些资产
flutter web app deployed on github.pages cannot access SOME assets
[已更新通过 github ]
上的步骤检查问题
运行 我在本地的 flutter web 应用程序
flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release
按预期工作 (video), but building it and deploying it to github pages (here)
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
和构建文件夹中的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
子文件夹中,则添加该子文件夹的名称在 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'
[已更新通过 github ]
上的步骤检查问题运行 我在本地的 flutter web 应用程序
flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release
按预期工作 (video), but building it and deploying it to github pages (here)
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
和构建文件夹中的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
子文件夹中,则添加该子文件夹的名称在 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'