背景
- 我正在使用安卓工作室创建一个Flutter网络应用程序
- 该应用程序在谷歌浏览器的本地主机上成功运行
- 当我将其部署到Firebase主机时；Firebase主机设置完成"；显示页面而不是应用程序
我尝试了什么有几个Stack Overflow帖子没有解决这个问题。其中包括：
- 在项目的根目录中创建firebase.json文件
- 等待主机上线一段时间
- 确保在运行firebaseinit命令时使用
build/web - 在InCognito模式下打开托管URL
- 确保在运行firebaseinit时不会覆盖index.html
- 确保将正确的脚本粘贴到index.html文件中
遵循的步骤
- 在Android Studio中，创建一个新的Flutter应用程序
- 我使用包名称
au.com.mydomain(其中mydomain是我拥有的域名) - 我注意到项目文件结构中没有Web文件夹
- 我打开一个终端窗口，导航到应用程序的根文件夹
- 我运行命令
flutter create web - 该命令的结果是"；全部完成"以及"；为了运行您的应用程序，请键入
cd web和flutter run"> - 我执行命令
cd web和flutter run。该应用程序在谷歌浏览器的本地主机上成功运行 - 我回到AndroidStudio，注意到项目文件结构中仍然没有Web文件夹
- 我使用web浏览器导航到Firebase并创建一个新项目，我称之为
demo159752 - 我禁用此项目的谷歌分析
- 项目已成功创建
- 在Firebase的demo159752项目中，我添加了一个Web应用程序
- 我使用
demo作为应用程序昵称 - 我不勾选"同时设置Firebase主机…"框
- 我单击"注册应用程序"按钮
- 我阅读了指示，其中指出我应该"；将这些脚本复制并粘贴到标签的底部，但在使用任何Firebase服务之前">
- 我返回安卓工作室进行此操作，并注意到
web文件夹现在在安卓工作室的文件结构中可见 - 我打开这个
web文件夹。它不包含index.html文件，但包含一个子文件夹(也称为web) - 我打开
web子文件夹，发现它包含一个index.html文件 - 我打开index.html文件并导航到
</body>。我把来自firebase的代码粘贴到</body>上面 - 我在web浏览器中返回Firebase，然后单击"继续到控制台">
- 在Firebase控制台中，我单击Hosting
- 我单击"入门"并升级为运行
npm install -g firebase-tools以安装Firebase CLI。它已经安装在我的机器上，但我还是从终端运行此命令。这导致语句"；更新的1个包"> - 我在web浏览器中返回Firebase。我不点击名为"；还向我展示将Firebase JavaScript SDK添加到我的web应用程序中的步骤"；并继续到步骤2
- 我被指示运行命令
firebase login，我这样做；已经以CCD_ 19"的身份登录；(其中emailAddress是我的电子邮件地址) - 我返回浏览器，并被指示运行命令
firebase init，我照做了。然后我导航到"主机"选项，按键盘上的空格选择它，然后点击回车键 - 有人问我要使用哪个firebase项目，我选择了
demo159752 - 我使用以下选项：
- 你想用什么作为你的公共目录？
build/web - 是否配置为单页应用程序？
Y - 使用GitHub设置自动构建和部署？
N - 我注意到声明：
✔ Wrote build/web/index.html - 我注意到声明：
i Writing configuration info to firebase.json... - 我注意到声明：
i Writing project information to .firebaserc... - 我注意到声明：
✔ Firebase initialization complete! - 我在web浏览器中返回Firebase，然后单击"下一步"继续执行步骤3
- 我被指示运行命令
firebase deploy - 我返回到"终端"窗口并运行此命令
- 我注意到声明：
✔ Deploy complete! and am gien a hosting URL. - 我导航到主机URL，希望看到我的应用程序。然而，我只看到一页写着"；Firebase主机设置完成">
- 我返回Android Studio，检查
firebase.json文件是否已按预期创建。然而，事实并非如此 - 我试图通过手动创建一个
firebase.json文件来解决这个问题。为此，我在根目录中创建了一个名为firebase.json的新文件，并使用以下代码：
{"托管"：{"公共"："构建/web"；，"忽略"：["firebase.json"；，">/.*"；，">/nod_module/**"；]｛｝
- 我返回终端并导航到项目的根目录，然后进入web子文件夹，然后运行
flutter build web --release - 然后我运行
firebase deploy - 该应用程序仍未部署，Firebase Hosting Setup Complete页面仍然存在
问题为什么我的应用程序没有成功部署？我做错了什么？我需要做些什么才能成功部署它？
其他详细信息Flutter版本：
Flutter 2.1.0-12.1.pre • channel dev • https://github.com/flutter/flutter.git
Framework • revision 8264cb3e8a (5 weeks ago) • 2021-03-10 12:37:57 -0800
Engine • revision 711ab3fda0
Tools • Dart 2.13.0 (build 2.13.0-116.0.dev)
Flutter刮刀
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, 2.1.0-12.1.pre, on Mac OS X 10.15.7 19H524 darwin-x64,
locale en-AU)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for
more details.
[!] Xcode - develop for iOS and macOS
✗ Xcode 11.4.1 out of date (12.0.1 is recommended).
Download the latest version or update via the Mac App Store.
! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To upgrade see
https://guides.cocoapods.org/using/getting-started.html#installation for
instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] Connected device (1 available)
! Doctor found issues in 2 categories.
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
-->
<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="web">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>web</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing ?? reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyCsPqvAN2gvlyCv3J7H1lTscXxB0T5itDE",
authDomain: "demo159752.firebaseapp.com",
projectId: "demo159752",
storageBucket: "demo159752.appspot.com",
messagingSenderId: "222592650517",
appId: "1:222592650517:web:ff8984d70b66dfc1fa2d1c"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>
firebase.json文件
{
"hosting": {
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
我用这篇文章来帮助我解决这个问题，我概述了以下步骤：
flutter项目根目录中有一个build/web文件夹，还有一个web文件夹。运行firebase init并在请求主目录时选择build/web。(不是项目根目录中的web文件夹)
然后运行flutter build web，build/web中的网页文件将被修改。
然后运行firebase deploy --only hosting，几分钟后就会显示网页。
对我来说，第一次显示花了几个小时，但从第二次开始，我对网站所做的更改在不到一分钟的时间内就显示出来了。
我遇到了同样的问题，我决定等待，15分钟后我的网站出现了。再试一次，再等一会儿。
我对Flutter有多年的经验，并花了一些时间。解决方案：如果一切都做对了，只需尝试清除浏览器历史记录或在另一个浏览器中打开它。
它一直在工作，但我没能看到。祝你们好运
您可能需要清除浏览器缓存。试着在隐身模式下运行。
您的方法是正确的，但请确保从正确的文件地址进行了部署。