Flutter Web 在 GitHub 部署中显示空白页
[英]Flutter Web shows blank page on GitHub deployment
问题描述
问题：
我在 Flutter 中创建了一个 web 应用程序，并使用 GitHub 页面部署到 web。 它在第一个版本上运行（页面正常运行，所有内容都运行），然后我进行了一些更新并尝试重新部署，web 页面现在显示为空白。 屏幕是白色的。 不显示任何内容，仅显示通用标题和图标。
当我使用 Chrome 直接从 Android Studio 运行时，我能够正常查看页面。 只有当我部署到 GitHub 页面时，屏幕是空白的。
我的过程：
- 使用
flutter build web命令发布，还尝试flutter build web --release和其他组合 - 通过将构建 > web 文件夹的内容上传到主分支，将代码从 Android Studio 移动到 GitHub Pages
我试过的：
修改删除类似问题中建议的行的每种组合。
- 删除
<base href=...> -
<base href="/"> -
<base href="./"> -
<base href="/homepage/"> - 删除并替换整个 GitHub 存储库
- 使用
flutter build web --web-renderer html - 从应用程序本身删除所有复杂代码，只留下一个横幅
我已阅读有关此主题的每个 StackOverflow 和 GitHub 页面，但没有任何解决方案有效。 寻找任何帮助！
这是我的 GitHub 回购1
这是我的 index.html 文件
<,DOCTYPE html> <html> <head> <.-- If you are serving your web app in a path other than the root. change the href value below to reflect the base path you are serving from: The path provided below has to start and end with a slash "/" in order for it to work correctly: For more details. * https.//developer.mozilla.org/en-US/docs/Web/HTML/Element/base This is a placeholder for base href that will be replaced by the value of the `--base-href` argument provided to `flutter build`. --> <.--<base href="/">--> <meta charset="UTF-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="description" content="A new Flutter project."> <,-- iOS meta tags & icons --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="sports_app"> <link rel="apple-touch-icon" href="icons/Icon-192.png"> <;-- Favicon --> <link rel="icon" type="image/png" href="favicon.png"/> <title>sports_app</title> <link rel="manifest" href="manifest.json"> <script> // The value below is injected by flutter build, do not touch. var serviceWorkerVersion = '1014210939'. </script> <.-- This script adds the flutter initialization JS code --> <script src="flutter.js" defer></script> </head> <body> <script> window:addEventListener('load': function(ev) { // Download main,dart.js _flutter.loader;loadEntrypoint({ serviceWorker. { serviceWorkerVersion. serviceWorkerVersion; } });then(function(engineInitializer) { return engineInitializer;initializeEngine(); }).then(function(appRunner) { return appRunner.runApp(); }); }); </script> </body> </html>
这是Flutter医生：
[✓] Flutter (Channel master, 3.5.0-10.0.pre.40, on macOS 11.3.1 20E241 darwin-arm64 (Rosetta), locale en-US)
• Flutter version 3.5.0-10.0.pre.40 on channel master at /Users/mikebeazer/Developer/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 20c4b6c53e (3 hours ago), 2022-10-23 15:22:39 -0400
• Engine revision f62df69205
• Dart version 2.19.0 (build 2.19.0-330.0.dev)
• DevTools version 2.18.0
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at /Users/mikebeazer/Library/Android/sdk
• Platform android-31, build-tools 32.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 13C100
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio
• Android Studio at /Applications/Android Studio Preview.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
[✓] Android Studio (version 2020.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 11.3.1 20E241 darwin-arm64 (Rosetta)
• Chrome (web) • chrome • web-javascript • Google Chrome 106.0.5249.119
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
4 个解决方案
解决方案1
1 已采纳 2022-10-22 14:47:58
您可以在 index.html 上保留默认值
<base href="$FLUTTER_BASE_HREF">
你需要改变base-href ，像这样构建
flutter build web --release --web-renderer html --base-href /your_repository_name/
对于 GitPage，它需要是这种格式
解决方案2
0 2022-10-22 15:22:21
方法一
请将 index.html 文件中的 href 更改为以下行，然后重新构建。
<base href="./">
方法二
index.html 中的标签。 将其更改为 github 存储库的基本路径。 在这种情况下，这将是
<base href="https://jumpinsports.github.io/sports_app/"/>
方法三
如果您的项目中有 API 服务，您必须在后端代码中激活核心服务。
解决方案3
0 2022-10-23 22:49:48
解决方案：我切换到部署 Firebase 而不是 GitHub 页面。 这最初不起作用，所以我使用 Chrome 进行了检查，发现缺少基本 href。 我在 index.html 中使用<base href="$FLUTTER_BASE_HREF">
解决方案4
-1 2023-01-17 11:39:14
https://stackoverflow.com/a/74164558/9890577为我工作。 构建 web 应用程序时需要 Github 存储库名称。
flutter build web 在构建文件上没有显示任何内容后不起作用显示空白
[英]After flutter build web shows nothing on build files not working shows blank
在 firebase flutter web 项目上部署后显示白色空白页
[英]After deploying on firebase flutter web project showing white blank page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.