Flutter 构建和发布为 Web 应用-Toy模板网

这篇具有很好参考价值的文章主要介绍了Flutter 构建和发布为 Web 应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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文件部署在服务端。文章来源地址https://www.toymoban.com/news/detail-429863.html

如果代码运行在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编译器进行编译。

到了这里，关于Flutter 构建和发布为 Web 应用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！