配置 Web 应用的 URL 策略

Flutter Web 应用支持两种基于 URL 的路由的配置方式：

Hash（默认）
路径使用 # + 锚点标识符 读写，例如：flutterexample.dev/#/path/to/screen。

Path
路径使用非 # 读写，例如：flutterexample.dev/path/to/screen。

要配置 Flutter 使用 path 策略，请使用 Flutter SDK 中 flutter_web_plugins 库提供的 usePathUrlStrategy 方法。

你不能直接使用 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 Hosting 托管，在初始化项目时选择 "配置单页应用" 选项。更多信息请查看 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-11-02。 查看文档源码 或者 为本页面内容提出建议。