Ede*_*ril 44 dart flutter flutter-web
Flutter Web 项目的默认 URL 定义了一个包含 hashtag ( #)的 URL ，如下所示：
http://localhost:41521/#/peaple/...
我想删除这个“#”，看起来像这样：
http://localhost:41521/peaple/
我怎么解决这个问题？
cre*_*not 51
您现在可以使用一个简单的包和一行代码从您的 Flutter Web 应用程序中删除前导哈希 (#)：（url_strategy完全披露：我是作者）
url_strategy您只需按照此处所述添加依赖项，然后将以下函数调用添加到您的main函数中：
import 'package:url_strategy/url_strategy.dart';
void main() {
// Here we set the URL strategy for our web app.
// It is safe to call this function when running on mobile or desktop as well.
setPathUrlStrategy();
runApp(MyApp());
}
打电话setPathUrlStrategy就是你需要做的一切
该包还确保运行代码不会在移动设备上崩溃（见下文）。此外，stable如果您stable在beta.
您需要确保在使用路径 URL 策略时包含<base href="/">在您的<head>部分中web/index.html。
这是在创建新的 Flutter 应用程序时默认添加的。
此外，当部署您的生产应用程序，你需要确保每一条路径指向你index.html。如果您使用 Firebase 托管等工具，则在将您的应用配置为单页应用时会自动为您完成此操作。
否则，您想查找如何为index.html您正在使用的主机重写所有路径。
本质上，您希望拥有一个单页应用程序，其中 HTTP 服务器index.html为所有路径提供服务。
包实现基于使用flutter_web_plugins. 使用该软件包的好处如下：
stable（因为网络功能仍在 上beta）。小智 12
以下答案复制自 Mouad Debbar 在 GitHub 上的解释（请参阅问题评论）。
以下是它可用后的使用步骤：
<base href="/">在文件的<head>部分内添加web/index.html。这将自动为 flutter create 创建的新项目添加。但是对于现有的应用程序，开发人员需要手动添加。如果flutter_web_plugins依赖项pubspec.yaml尚不存在，则添加依赖项：
dependencies:
flutter_web_plugins:
sdk: flutter
添加一个lib/configure_nonweb.dart内容如下：
void configureApp() {
// No-op.
}
添加一个lib/configure_web.dart内容如下：
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
void configureApp() {
setUrlStrategy(PathUrlStrategy());
}
在 中lib/main.dart，执行以下操作：
import 'package:flutter/material.dart';
import 'configure_nonweb.dart' if (dart.library.html) 'configure_web.dart';
void main() {
configureApp();
runApp(MyApp());
}
对于 2023 年到来的用户，Flutter 现在在其官方文档中解释了如何执行此操作。 \n（在撰写本文时）他们没有提及的一件事是如何更新pubspec.yaml文件。
第 1 步：更新 pubspec.yaml，如下所示。
\ndependencies:\n flutter:\n sdk: flutter\n flutter_web_plugins: # add this line\n sdk: flutter # and this line\n第2步：运行flutter pub get。
步骤3：更新main.dart如下。
\nimport \'package:flutter_web_plugins/url_strategy.dart\'; // add this import\n\nvoid main() {\n usePathUrlStrategy(); // and this line\n runApp(ExampleApp());\n}\n第 4 步：请注意下面 Flutter 关于运行本地 flutter web 的建议。
\n\n\n通过运行创建的本地开发服务器
\nflutter run -d chrome\n配置为正常处理任何路径并回退到您的 app\xe2\x80\x99s\nindex.html 文件。
我个人喜欢在固定端口上运行它flutter run -d chrome --web-port=3000。
干杯!
\nflutter_supabase这帮助我解决了使用and实现 magic-link auth 时的重定向问题go_router（我为搜索引擎爬虫提到了这一点，以防它对其他人有帮助）。
| 归档时间： |
|
| 查看次数： |
10474 次 |
| 最近记录： |