在 Web 上配置 URL 策略
Flutter Web 应用支持两种在 Web 上配置基于 URL 的导航方式
- 哈希(默认)
- 路径会读取并写入到哈希片段中。例如,
flutterexample.dev/#/path/to/screen
。 - 路径
- 路径不带哈希进行读取和写入。例如,
flutterexample.dev/path/to/screen
。
配置 URL 策略
#要将 Flutter 配置为使用路径,请使用 flutter_web_plugins 库提供的 usePathUrlStrategy 函数,该库是 Flutter SDK 的一部分。
你不能直接使用 pub add
添加 flutter_web_plugins
。在你的 pubspec.yaml
文件中将其作为 Flutter SDK 依赖项包含进去。
dependencies:
flutter:
sdk: flutter
flutter_web_plugins:
sdk: flutter
然后在 runApp
之前调用 usePathUrlStrategy
函数
import 'package:flutter_web_plugins/url_strategy.dart';
void main() {
usePathUrlStrategy();
runApp(ExampleApp());
}
配置你的 Web 服务器
#PathUrlStrategy 使用 History API,这需要为 Web 服务器进行额外的配置。
要配置你的 Web 服务器以支持 PathUrlStrategy,请查阅你的 Web 服务器文档,以了解如何将请求重写到 index.html
。有关如何配置单页应用的详细信息,请查阅你的 Web 服务器文档。
如果你正在使用 Firebase Hosting,请在初始化项目时选择“配置为单页应用”选项。有关更多信息,请参阅 Firebase 的配置重写文档。
通过运行 flutter run -d chrome
创建的本地开发服务器配置为能够优雅地处理任何路径,并回退到你的应用的 index.html
文件。
在非根路径下托管 Flutter 应用
#将 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
将不同(例如分别为 "."
、".."
和 "../.."
)。