Flutter 现有项目到 WebApp + Firebase (Firestore + Hosting)
Posted
技术标签:
【中文标题】Flutter 现有项目到 WebApp + Firebase (Firestore + Hosting)【英文标题】：Flutter existing project to WebApp + Firebase (Firestore + Hosting) 【发布时间】：2020-07-09 16:51:16 【问题描述】：我有一个使用 Firestore 的现有 Flutter 应用（在 android/ios 上正常运行）。
目标：
-
我想先让它支持网络
我想在 Firebase 主机上托管它
目前的结果：
-
在本地运行时，空白页
部署到 firebase 时，甚至似乎都没有运行 index.html
我尝试了什么
根据this教程：
a) 在我的 firebase 项目中添加了一个 Web 应用
b)npm install -g firebase-tools
c)firebase login
d)firebase init
==> 我选择 Firestore 和托管
==> 使用现有项目，选择我的项目
==> 使用所有默认设置（公共目录的 build/web 文件夹除外）
e)flutter channel dev
flutter upgrade
flutter config --enable-web
f)flutter create .
g)flutter build web
h) 然后我将 build/web 中的所有内容复制到 /web 文件夹，在正文底部添加来自 firebase 的 CDN，然后通过以下方式调用 Firebase JS SDK：
错误
在 chrome 上本地运行时出现此错误：
(index):53 Uncaught ReferenceError: firebase is not defined
至于使用firebase deploy，页面说我设置托管成功但没有显示index.html
供参考：
<!DOCTYPE html>
<html>
<head>
<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="kidz_happy_pawn">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>kidz_happy_pawn</title>
<link rel="manifest" href="manifest.json">
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='/resources/tutorial/css/example.css'>
</head>
<body>
<div id="message">
<h2>Welcome</h2>
<h1>Firebase Hosting Setup Complete</h1>
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go
build something extraordinary!</p>
</div>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
<script>
var firebaseConfig =
apiKey: "xxx-from-firebase",
authDomain: "xxx-from-firebase",
databaseURL: "xxx-from-firebase",
projectId: "xxx-from-firebase",
storageBucket: "xxx-from-firebase",
messagingSenderId: "xxx-from-firebase",
appId: "xxx-from-firebase",
measurementId: "xxx-from-firebase"
;
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script>
if ('serviceWorker' in navigator)
window.addEventListener('load', function ()
navigator.serviceWorker.register('flutter_service_worker.js');
);
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
【问题讨论】：
【参考方案1】：取决于你如何设置你的 firebase apis。来自flutter fire 这是你应该如何设置它。 在您的应用程序目录中，编辑 web/index.html 以添加以下内容： `
<body>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
<!-- ADD THIS BEFORE YOUR main.dart.js SCRIPT -->
var firebaseConfig =
apiKey: "",
authDomain: "[YOUR_PROJECT].firebaseapp.com",
databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
projectId: "[YOUR_PROJECT]",
storageBucket: "[YOUR_PROJECT].appspot.com",
messagingSenderId: "",
appId: "1:...:web:",
measurementId: ""
;
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
`
【讨论】：
我确实这样做了，但我得到了同样的错误：未捕获的 ReferenceError: firebase is not defined。我添加了 index.html 以供参考。 我有点困惑为什么，但它现在似乎可以工作（使用以前发布的代码）。谢谢以上是关于Flutter 现有项目到 WebApp + Firebase (Firestore + Hosting)的主要内容，如果未能解决你的问题，请参考以下文章