如何在没有 inte.net 连接的情况下运行 flutter web 应用程序

Question

我创建了一个flutter web应用程序，我用命令完成构建它.. flutter build web --release ，然后将它转移到本地服务器，除非它连接到 Inte.net，否则该站点无法运行，

我希望该站点在没有 inte.net 连接的情况下工作，因为我在一个组织中工作并且一些用户没有 inte.net 权限。

拜托，我想要解决这个问题的方法。

谢谢

Answer 1

1. 从您的 web 应用程序的资产策略中下载并在本地设置
2. 添加到本地 Canvaskit 的链接如下：

flutter 构建 web --web-renderer=canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=/canvaskit/

Answer 2

问题是，flutter 有一些依赖关系，当您作为客户端离线时无法解决。 主要由canvaskit和某些 google fonts 组成。

有多种解决方案。 最简单的是使用 html 网络渲染器：

flutter build web --release --web-renderer html

这应该适用于大多数应用程序，但是它的性能低于canvaskit ，尤其是在小部件密度高的情况下。

因此，您也可以在本地使用canvaskit ，因为它是在您构建版本时自动构建的。 但是您必须通过在 index.html 中添加以下行来将其设置为基础 url：

<script>
  window.flutterConfiguration = {
      canvasKitBaseUrl: "/canvaskit/"
  };
</script>

这可确保您的 flutter 应用程序使用canvaskit的本地源。 但是，另一个问题可能是使用 google fonts，例如 Roboto，因为这些通常也需要下载。 但是您可以将它们显式添加到pubspec.yaml以解决此问题，就像在此处解释的那样。

更多信息的一些来源：

flutter 网络渲染器

同样的问题，但在 github

使 Flutter 能够离线

Answer 3

为了使其适用于开发版本，我在以下步骤中合并了上面 Spaching 的回答。

1. 运行： flutter clean以清理所有构建缓存（这对于在下面的第 4 步中重新下载 canvas 工具包很重要）。
2. 运行： flutter pub get按照 pubspec.yaml 下载软件包
3. 如果您使用的是构建运行器： dart run build_runner build --delete-conflicting-outputs

在这个阶段你应该有一个干净的/build文件夹（我也有一个 ios 子文件夹，因为我也在为 iOS 开发）

4. 运行： flutter build web

在这个阶段，你应该有一个干净的/build/web添加在它下面的canvaskit文件夹。 完整路径： /build/web/canvaskit/

然后：

5. 打开/web下的index.html （注意 -不要打开/build/web下的那个）
6. 将上面答案中提到的脚本添加到 html 文件的正文中。 我只是将它添加到已经存在的现有脚本之上。
7. 在 deubg 模式下运行您的项目（关闭 Wifi）。