在 Web 上配置 URL 策略

Flutter Web 应用支持两种配置基于 Web 上 URL 的导航的方式

哈希（默认）

路径读取和写入到 哈希片段。例如，flutterexample.dev/#/path/to/screen。

路径

读取和写入路径时不使用哈希值。例如，flutterexample.dev/path/to/screen。

要配置 Flutter 使用路径，请使用 usePathUrlStrategy 函数，该函数由 flutter_web_plugins 库提供，该库是 Flutter SDK 的一部分。

您无法使用 pub add 直接添加 flutter_web_plugins。请将其作为 Flutter SDK 依赖项 包含在您的 pubspec.yaml 文件中。

dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter

然后在 runApp 之前调用 usePathUrlStrategy 函数。

import 'package:flutter_web_plugins/url_strategy.dart';

void main() {
  usePathUrlStrategy();
  runApp(ExampleApp());
}

PathUrlStrategy 使用 History API，这需要对 Web 服务器进行额外配置。

要配置您的 Web 服务器以支持 PathUrlStrategy，请查看您的 Web 服务器的文档以将请求重写为 index.html。请查看您的 Web 服务器的文档，了解有关如何配置单页应用程序的详细信息。

如果您使用的是 Firebase 托管，则在初始化项目时选择“配置为单页应用程序”选项。有关更多信息，请参阅 Firebase 的 配置重写 文档。

通过运行 flutter run -d chrome 创建的本地开发服务器配置为优雅地处理任何路径，并回退到应用程序的 index.html 文件。

将 web/index.html 中的 <base href="/"> 标记更新为应用程序托管的路径。例如，要将您的 Flutter 应用程序托管在 my_app.dev/flutter_app 上，请将此标记更改为 <base href="/flutter_app/">。

相对 base href 标记受发布版本支持，但必须考虑页面提供服务的完整 URL。这意味着对于对 /flutter_app/、/flutter_app/nested/route 和 /flutter_app/nested/route/ 的请求，相对 base href 将有所不同（例如，分别为 "."、".." 和 "../.."）。

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-10-16。 查看源代码 或 报告问题.