Flutter Web项目的默认URL定义了一个包含哈希标签（#）的URL，如下所示：
#
http://localhost:41521/#/peaple/...
我想删除此“#”，如下所示：
http://localhost:41521/peaple/
我怎样才能解决这个问题？
ldxq2e6h1#
现在，您可以使用简单包和*单行代码*从Flutter Web应用中删除前导哈希（#）：url_strategy（完全披露：我是作者）
url_strategy
您只需添加依赖项as described here，然后向main函数添加以下函数调用：
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上构建移动应用，而在beta上仅构建Web应用，则该软件包也将在stable上运行。
setPathUrlStrategy
stable
beta
在使用路径URL策略时，需要确保将<base href="/">包含在web/index.html的<head>部分中。创建新Flutter应用程序时，* 默认情况下 * 会添加此选项。此外，在部署您的生产应用时，您需要确保 * 每个路径 * 都指向您的index.html。如果您使用Firebase托管等工具，则在将您的应用配置为单页面应用时会自动完成此操作。否则，您需要查找如何为您正在使用的主机重写index.html的所有路径。实际上，您希望有一个单页面应用程序，其中HTTP服务器为所有路径提供index.html。程序包实施基于使用flutter_web_plugins的手动解决方案。使用程序包的好处如下：
<base href="/">
web/index.html
<head>
index.html
flutter_web_plugins
ruyhziif2#
以下是它可用后的使用步骤：将<base href="/">添加到web/index.html文件的<head>部分。flutter create创建的新项目会自动添加<base href="/">。但对于现有应用，开发人员需要手动添加。如果pubspec.yaml中不存在flutter_web_plugins依赖项，请添加它：
pubspec.yaml
dependencies: flutter_web_plugins: sdk: flutter
添加包含以下内容的lib/configure_nonweb.dart：
lib/configure_nonweb.dart
void configureApp() { // No-op. }
添加包含以下内容的lib/configure_web.dart：
lib/configure_web.dart
import 'package:flutter_web_plugins/flutter_web_plugins.dart'; void configureApp() { setUrlStrategy(PathUrlStrategy()); }
在lib/main.dart中，执行以下操作：
lib/main.dart
import 'package:flutter/material.dart'; import 'configure_nonweb.dart' if (dart.library.html) 'configure_web.dart'; void main() { configureApp(); runApp(MyApp()); }
jrcvhitl3#
仅适用于Github页面托管这也适用于不是直接从domain.com/提供服务而是从某个路径domain.com/path/提供服务的应用。您需要将您的存储库名称添加到base href中，否则您的网站将无法正常工作。
domain.com/
domain.com/path/
<base href="/REPO_NAME/">
kx1ctssn4#
如果您唯一关心的是路由，则可以执行以下操作：
onGenerateRoute: (settings) { List segments = settings.name.split('/').where((x) => ! x.isEmpty).toList(); String page = segments.length > 0 ? segments[0] : ''; ... } }
qv7cva1a5#
将此添加到pubspec.yaml中
在main.dart文件中，将cofigureApp添加到应用程序的根目录，并添加此导入
import 'package:flutter_web_plugins/flutter_web_plugins.dart'; void configureApp() { setUrlStrategy(PathUrlStrategy()); } void main() { WidgetsFlutterBinding.ensureInitialized(); configureApp(); runApp(MyApp()); }
重新启动web应用程序出去会是这样
http://localhost:52299/login_page
yuvru6vn6#
我发现上面的大多数答案都有点令人困惑，最后对我的firebase托管网站起作用的是Johannes Milke的这篇短短4分钟的YouTube tutorial文章。本教程概述了解决“#”问题的许多选项，基本上更好地解释了上面的一些答案。1.添加url_strategy依赖项，如上面许多答案中所述。1.在index.html文件的节中添加基址href="/"〉1.通过添加“rewrites”确保所有路径都指向index.html：[ {“来源”：“**"，“目的地”：“/index.html”} ]在我的firebase.json中。
u2nhd7ah7#
1.安装在pubspec.yamlurl_strategy中1.在main.dart中写入：
import 'package:url_strategy/url_strategy.dart'; void main() { WidgetsFlutterBinding.ensureInitialized(); setPathUrlStrategy(); runApp(MyApp()); }
1.如果刷新页面时出现错误，请将文件404.html添加到index.html所在的文件夹中。复制index.html的全部内容并将其粘贴到404.html中。对于某些主机，这就足够了。但某些主机还需要文件“.htaccess”。1.您应在同一文件夹中创建文件“.htaccess”并写入此文件：
RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule . /index.html [L]
此解决方案接收自this video。
at0kjp5o8#
您也可以执行此操作
String main_url = url.split('#').join();
例如，http：//localhost：31265/#apply？id=1输出：http：//localhost：31265/apply？id=1
8条答案
按热度按时间ldxq2e6h1#
现在，您可以使用简单包和*单行代码*从Flutter Web应用中删除前导哈希（#）：
url_strategy（完全披露：我是作者）使用
url_strategy您只需添加依赖项as described here，然后向
main函数添加以下函数调用：您只需调用
setPathUrlStrategy🎉该软件包还确保了运行代码不会在移动的上崩溃（见下文）。此外，如果您在
stable上构建移动应用，而在beta上仅构建Web应用，则该软件包也将在stable上运行。注解
在使用路径URL策略时，需要确保将
<base href="/">包含在web/index.html的<head>部分中。创建新Flutter应用程序时，* 默认情况下 * 会添加此选项。
此外，在部署您的生产应用时，您需要确保 * 每个路径 * 都指向您的
index.html。如果您使用Firebase托管等工具，则在将您的应用配置为单页面应用时会自动完成此操作。否则，您需要查找如何为您正在使用的主机重写
index.html的所有路径。实际上，您希望有一个单页面应用程序，其中HTTP服务器为所有路径提供
index.html。程序包实施基于使用
flutter_web_plugins的手动解决方案。使用程序包的好处如下：stable上您不会遇到任何缺少实现的问题（因为web特性仍然在beta上）。ruyhziif2#
以下是它可用后的使用步骤：
将
<base href="/">添加到web/index.html文件的<head>部分。flutter create创建的新项目会自动添加<base href="/">。但对于现有应用，开发人员需要手动添加。如果pubspec.yaml中不存在flutter_web_plugins依赖项，请添加它：添加包含以下内容的
lib/configure_nonweb.dart：添加包含以下内容的
lib/configure_web.dart：在
lib/main.dart中，执行以下操作：jrcvhitl3#
仅适用于Github页面托管
这也适用于不是直接从
domain.com/提供服务而是从某个路径domain.com/path/提供服务的应用。您需要将您的存储库名称添加到base href中，否则您的网站将无法正常工作。
kx1ctssn4#
如果您唯一关心的是路由，则可以执行以下操作：
qv7cva1a5#
将此添加到pubspec.yaml中
在main.dart文件中，将cofigureApp添加到应用程序的根目录，并添加此导入
重新启动web应用程序
出去会是这样
yuvru6vn6#
我发现上面的大多数答案都有点令人困惑，最后对我的firebase托管网站起作用的是Johannes Milke的这篇短短4分钟的YouTube tutorial文章。
本教程概述了解决“#”问题的许多选项，基本上更好地解释了上面的一些答案。
1.添加url_strategy依赖项，如上面许多答案中所述。
1.在index.html文件的节中添加基址href="/"〉
1.通过添加“rewrites”确保所有路径都指向index.html：[ {“来源”：“**"，“目的地”：“/index.html”} ]在我的firebase.json中。
u2nhd7ah7#
1.安装在pubspec.yamlurl_strategy中
1.在main.dart中写入：
1.如果刷新页面时出现错误，请将文件404.html添加到index.html所在的文件夹中。复制index.html的全部内容并将其粘贴到404.html中。对于某些主机，这就足够了。但某些主机还需要文件“.htaccess”。
1.您应在同一文件夹中创建文件“.htaccess”并写入此文件：
此解决方案接收自this video。
at0kjp5o8#
您也可以执行此操作
例如，http：//localhost：31265/#apply？id=1
输出：http：//localhost：31265/apply？id=1