如何处理“找不到页面”错误,手动直接输入URL并避免URL中的哈希字符?
介绍
当我必须在生产中部署我的第一个FlutterWeb应用程序时,我必须处理所有与WebServer逻辑相关的常规功能,尤其是:
著名的“找不到页面”从浏览器直接输入URL我在互联网上进行了大量搜索,但从未找到任何好的解决方案。
本文介绍了我实施的解决方案…
背景资料
本文撰写于年2月,基于Flutter1.14.6版(运行ChannelBeta)。
看一下Flutter路线图,FlutterWeb应该在今年正式发布,其结果是这篇文章可能不会很快相关,因为它所解决的问题可能在未来几个月内得到解决。
我也尝试与ServiceWorkers玩耍,但找不到任何解决方案。
在向您提供我已实施的解决方案之前,我想与您分享一些重要的信息…
提醒-FlutterWeb应用程序不能在完全可配置的Web服务器后面运行
“FlutterWeb应用程序不能在完全可配置的Web服务器后面运行”这句话非常重要,常常被人遗忘……
确实,当您运行FlutterWeb应用程序时,您“简单地”启动了一个基本的Web服务器,该服务器侦听某个“IP_address:port”并提供位于“web”文件夹中的文件。几乎没有配置/自定义可以添加到该Web服务器的实例。
不同的网页文件夹如果以调试模式运行FlutterWebApp,则Web文件夹为“/web”如果以发布模式运行,则Web文件夹为“/build/web”
当您运行FlutterWeb应用程序时,一旦激活了基本的Web服务器,就会从相应的“web”文件夹中自动调用“index.html”页面。
“index.html”页面会自动加载一些资产以及与整个应用程序相对应的“main.dart.js”文件。实际上,这对应于Dart代码和其他一些库的Javascript转换。
换句话说...当您访问“index.html”时,您正在加载整个应用程序。这意味着FlutterWeb应用程序是一个单页应用程序,并且在大多数情况下,除了在加载并启动该单页应用程序后检索任何其他资产(字体,图像等)之外,您之间不再会有任何交互FlutterWeb应用程序(在浏览器上运行)和Web服务器。
URL中的怪异“#”字符
当您运行FlutterWeb应用程序并从一个页面(=路由)导航到另一页面时,我想您已经注意到浏览器URL导航栏级别的更改了……
例如,假设您的应用程序由2个页面组成:“主页”和“登录页面”。主页将在应用程序启动时自动显示,并具有一个导航到LoginPage的按钮。
浏览器的URL栏将包含: