运行 在没有 android studio 的情况下在本地使用 flutter web 应用程序抛出 firebase 错误
Running flutter web app locally without android studio throws firebase error
在本地服务器上成功安装我的 flutter web 应用程序后（使用 express ），我可以 运行 在本地主机上安装我的 flutter 应用程序。但是，在访问它时，控制台显示错误
main.dart.js:28998 Uncaught ReferenceError: firebase is not defined
我想我需要在我的 app.js 中安装和引用 firebase，但实际上我不知道它是如何完成的（如果确实如此）。我尝试了 运行ning 命令 npm install firebase，它似乎成功安装了它，但我仍然收到此错误。
您知道我可能遗漏了什么或为什么会收到此错误以及如何解决吗？
请注意，如果使用 Android Studio 构建 运行 在 Chrome 上，该项目将完美运行，因此它一定与本地托管有关。
编辑
这是我当前的 index.html，当我在 Chrome
上通过 Android Studio 运行 项目时，它运行良好
<!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.
Fore 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="App test">
<!-- 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="my_app">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>My App</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>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyGoogleMapsKey"></script>
<script src="main.dart.js" type="application/javascript"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.1.1/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 src="https://www.gstatic.com/firebasejs/7.5.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.1/firebase-firestore.js"></script>
<script>
<!-- Your web app's Firebase configuration-->
var firebaseConfig = {
apiKey: "apiKey",
authDomain: "my-app.firebaseapp.com",
databaseURL: "https://myApp.firebaseio.com",
projectId: "my-app",
storageBucket: "my-app.appspot.com",
messagingSenderId: "2243255670923",
appId: "1:3134567819932:web:f09e90ce142l9ikk0d2f27"
};
<!-- Initialize Firebase-->
firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>
确保将整个 firebase 脚本和您在 index.html 中使用的服务包含在 web 文件夹中。 在之前做
<script src="main.dart.js" type="application/javascript"></script>
正文中的线。
请注意，即使 flutter 与您拥有的 index.html 配合得很好，这也可能是它无法在您的本地服务器上运行的原因。
在您的情况下，将所有与 firebase 相关的脚本（包括配置脚本）移动到 main.dart.js 脚本之前：
<body>
...
<script src="https://www.gstatic.com/firebasejs/7.5.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.1/firebase-firestore.js"></script>
<script>
var firebaseConfig = {
apiKey: "apiKey",
authDomain: "my-app.firebaseapp.com",
databaseURL: "https://myApp.firebaseio.com",
projectId: "my-app",
storageBucket: "my-app.appspot.com",
messagingSenderId: "2243255670923",
appId: "1:3134567819932:web:f09e90ce142l9ikk0d2f27"
};
firebase.initializeApp(firebaseConfig);
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
在本地服务器上成功安装我的 flutter web 应用程序后（使用 express
main.dart.js:28998 Uncaught ReferenceError: firebase is not defined
我想我需要在我的 app.js 中安装和引用 firebase，但实际上我不知道它是如何完成的（如果确实如此）。我尝试了 运行ning 命令 npm install firebase，它似乎成功安装了它，但我仍然收到此错误。
您知道我可能遗漏了什么或为什么会收到此错误以及如何解决吗？
请注意，如果使用 Android Studio 构建 运行 在 Chrome 上，该项目将完美运行，因此它一定与本地托管有关。
编辑
这是我当前的 index.html，当我在 Chrome
上通过 Android Studio 运行 项目时，它运行良好<!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.
Fore 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="App test">
<!-- 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="my_app">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>My App</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>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyGoogleMapsKey"></script>
<script src="main.dart.js" type="application/javascript"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.1.1/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 src="https://www.gstatic.com/firebasejs/7.5.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.1/firebase-firestore.js"></script>
<script>
<!-- Your web app's Firebase configuration-->
var firebaseConfig = {
apiKey: "apiKey",
authDomain: "my-app.firebaseapp.com",
databaseURL: "https://myApp.firebaseio.com",
projectId: "my-app",
storageBucket: "my-app.appspot.com",
messagingSenderId: "2243255670923",
appId: "1:3134567819932:web:f09e90ce142l9ikk0d2f27"
};
<!-- Initialize Firebase-->
firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>
确保将整个 firebase 脚本和您在 index.html 中使用的服务包含在 web 文件夹中。 在之前做
<script src="main.dart.js" type="application/javascript"></script>
正文中的线。
请注意，即使 flutter 与您拥有的 index.html 配合得很好，这也可能是它无法在您的本地服务器上运行的原因。
在您的情况下，将所有与 firebase 相关的脚本（包括配置脚本）移动到 main.dart.js 脚本之前：
<body>
...
<script src="https://www.gstatic.com/firebasejs/7.5.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.1/firebase-firestore.js"></script>
<script>
var firebaseConfig = {
apiKey: "apiKey",
authDomain: "my-app.firebaseapp.com",
databaseURL: "https://myApp.firebaseio.com",
projectId: "my-app",
storageBucket: "my-app.appspot.com",
messagingSenderId: "2243255670923",
appId: "1:3134567819932:web:f09e90ce142l9ikk0d2f27"
};
firebase.initializeApp(firebaseConfig);
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>