Flutter 构建和发布为 Web 应用

Posted 2023-03-04 黄毛火烧雪下

1 构建用于发布的应用

flutter build web

使用 flutter build web 命令构建应用程序以进行部署。你也可以通过使用 --web-renderer 自行选择渲染方式。（请查看 网页渲染器）这将生成包括资源的应用程序，并将文件放入项目的 /build/web 目录中。

一般的应用程序的 release 版本具有以下结构：

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
    packages
      cupertino_icons
        assets
          CupertinoIcons.ttf
    shaders
      ink_sparkle.frag
  canvaskit
    canvaskit.js
    canvaskit.wasm
    profiling
      canvaskit.js
      canvaskit.wasm
  favicon.png
  flutter.js
  flutter_service_worker.js
  index.html
  main.dart.js
  manifest.json
  version.json

2 运行(需要提前配置python环境)

python -m http.server 8000

编译完成后, 进入web目录： D:\\flutter3x\\flutter_pro\\example\\build\\web , 运行服务 python -m http.server 8000 ，启动 Web 服务器。

关闭命令窗口即可关闭 此服务

3 Flutter编译器是如何将我们写的dart代码编译成js代码的呢？

Flutter for Web的两种编译模式

Flutter官方给我们提供了dartdevc和dart2js两个编译器。我们不仅可以将代码直接运行在Chrome浏览器，也可以将Flutter代码编译为js文件部署在服务端。

• 如果代码运行在Chrome浏览器，flutter_tools会使用dartdevc编译器进行编译，dartdevc是支持增量编译的，开发者可以像调试Flutter Mobile代码一样使用hot reload来提升调试效率。
• Flutter for Web调试也是非常方便的，编译后的代码是默认支持source map，当运行在web浏览器时，开发者是不用关心生成的js代码是怎样的。
• 开发者可以使用Chrome自带的开发者工具在dart代码中打断点，当执行到相应的js代码时会断到dart代码中。
• 如果需要编译成release产物部署在服务器，需要运行flutter build web命令调用dart2js编译器进行编译。