【发布时间】：2022-01-13 09:24:53
【问题描述】：
我正在尝试将我的 Flutter 应用部署到 Firebase 托管。应用程序使用 flutter run -d chrome 运行良好，并使用 flutter build web --web-renderer html --release 成功构建
在我的 Flutter Web 应用程序中，我有不止一页。我正在使用
速度_x：^3.3.0
因为这个插件使用flutter 2.0导航，所以用于页面路由。
当我通过单击打开的下一页转到另一个页面时，我打开 Web 主页时遇到的问题工作正常，但是当我刷新显示 404 未找到的第二页时，我不明白我是什么做错了。同样的事情在调试模式下工作正常，但在部署我的颤振网络后，404 问题出现了。 请帮助我，我尝试了很多，但确实明白我应该怎么做。
我的 main.dart 文件
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Hive.initFlutter();
Vx.setPathUrlStrategy();
Hive.registerAdapter(MultiAccountAdapter());
await Hive.openBox<MultiAccount>('accounts');
await Firebase.initializeApp();
FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
runApp(MyApp());
}
Locale locale;
void getPref() async {
var res = await SharedPref().getStringVariable("lan");
if (res != null) {
if (res != null && res == "ENGLISH") {
locale = Locale('en', 'US');
} else if (res != null && res == "DUTCH") {
locale = Locale('nl', 'NL');
} else {
locale = Locale('en', 'US');
}
} else {
locale = ui.window.locale;
// Get.updateLocale(locale);
}
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return OverlaySupport(
child: GetMaterialApp.router(
debugShowCheckedModeBanner: false,
translations: LocaleString(),
locale: locale,
theme: ThemeData(
primaryColor: green,
primaryColorDark: greenDark,
fontFamily: 'Montserrat-Medium',
accentColor: Colors.grey,
cursorColor: greenDark,
textTheme: TextTheme(
bodyText1: TextStyle(fontSize: 14.0),
),
),
routeInformationParser: VxInformationParser(),
routerDelegate: VxNavigator(
routes: VxRoutes.instance.newMethod,
),
),
);
}
}
我的路由文件
class VxRoutes {
static VxRoutes instance = VxRoutes();
Map<Pattern, VxPageBuilder> get newMethod {
return {
"/": (_, param) => VxRoutePage(
child: HomeScreen(
showSnackbar: param ?? false,
),
transition: (animation, child) => FadeTransition(
opacity: animation,
child: child,
),
),
SteplerDetailScreenRoute: (uri, params) {
var steplerId = uri.queryParameters["steplerId"];
if (steplerId == null || steplerId == "") {
return VxRoutePage(
child: CrashScreen(),
transition: (animation, child) => FadeTransition(
opacity: animation,
child: child,
),
);
}
return VxRoutePage(
child: SteplerDetailScreen(
steplerId: int.tryParse(steplerId.toString()),
),
transition: (animation, child) => FadeTransition(
opacity: animation,
child: child,
),
);
},
FullPhotoRoute: (uri, params) {
var url = uri.queryParameters["url"];
if (url == null || url == "") {
return VxRoutePage(
child: CrashScreen(),
transition: (animation, child) => FadeTransition(
opacity: animation,
child: child,
),
);
}
return VxRoutePage(
child: FullPhoto(
url: url,
),
transition: (animation, child) => FadeTransition(
opacity: animation,
child: child,
),
);
},
};
}
}
我的 index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta name="google-signin-client_id"abc">
<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="stepler_web">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>Stepler</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<script
async
defer
crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js"
></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "abc",
authDomain: "abc",
projectId: "abc",
storageBucket: "abc",
messagingSenderId: "abc",
appId: "abc",
measurementId: "abc"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
【问题讨论】：
标签： flutter flutter-web firebase-hosting