Flutter web 自定义 url 路由导致 404

Posted 2023-02-23

【中文标题】Flutter web 自定义 url 路由导致 404

【英文标题】：Flutter web custom url route results in 404

【发布时间】：2021-11-03 15:41:24

【问题描述】：

我正在使用 Flutter Web 构建网站。我的网站中有两条主要路线，一个 LoginPage，它也是 initialRoute 和一个 HomePage。 我使用Get 在路线之间移动，并使用url_strategy 包设置路径导航策略。

Main.dart

Future<void> main() async 
  WidgetsFlutterBinding.ensureInitialized();
  setPathUrlStrategy();
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'website',
      unknownRoute: GetPage(
        name: '/notfound',
        page: () => UnknownRoutePage(),
      ),
      initialRoute: '/LoginPage',
      getPages: [
        GetPage(
          name: '/LoginPage',
          page: () => LoginPage(),
        ),
        GetPage(
          name: '/HomePage',
          page: () => HomePage(),
        )
      ],
    );
  

同时，当我在我的电脑上调试时一切正常（即使使用 flutter run --release）我在 Firebase 托管上部署网站时遇到问题。

假设我尝试重新加载一个页面（例如 www.website.com/LoginPage）我从 Firebase Hosting 中找不到默认页面（即使我设置了一个自定义的未找到页面），而我希望被重定向到 LoginPage我的网站。

我该如何解决这个问题？

【参考方案1】：

我想出了如何解决这个问题，刚刚添加

"rewrites": [ 
   "source": "**",
   "destination": "/index.html"
 ]

到我的 firebase.json 文件。

【讨论】：

太棒了，谢谢！