构建和发布为 Web 应用
(例如)在典型的开发过程中,你可以在命令行使用 flutter run -d chrome
命令测试应用程序。这会构建出 debug 版本的应用。
本页面会帮助你构建 release 版本的应用,其囊括了如下主题:
处理 Web 中的图片
Web 支持标准的 Image
widget 来显示图片。但是,由于 Web 浏览器需要安全地运行不受信任的代码,因此与移动和桌面平台相比,图像处理方面存在某些限制。
更多信息,请参阅 在 Web 中展示图片.
选择 Web 渲染器
默认情况下,flutter build
和 flutter run
命令对 Web 渲染器使用 auto
参数。这意味着您的应用程序在移动浏览器上会与 HTML 渲染器一起运行,而在桌面浏览器上与 CanvasKit 一起运行。这是我们推荐的组合方式,能够针对每个平台特性优化。
更多信息,请参阅 Web 渲染器.
混淆并压缩代码
当你创建了一个 release 版本时,便已经压缩了代码。
Debug 模式构建的 Web 应用没有被压缩,且 Tree-shaking 没有执行。
Profile 模式构建的 Web 应用没有被压缩,但 Tree-shaking 执行了。
Release 模式构建的 Web 应用被压缩了,并且 Tree-shaking 执行了。
构建用于发布的应用
使用 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
启动 Web 服务器(例如,python -m SimpleHTTPServer 8000
,或使用
dhttpd package),然后打开 /build/web 目录。在浏览器中访问 localhost:8000
(前文用 Python 启动的服务器)以查看应用程序的 release 版本。
将 Flutter 应用内嵌到一个 HTML 页面里
hostElement
使用 ** 在 Flutter 3.10 中新增**
你可以使用 flutter.js
和 hostElement
引擎初始化参数将
Flutter Web 应用嵌入到 Web 页面的任何 HTML 元素中。
要告诉 Flutter Web 在哪个元素中呈现,请使用 initializeEngine
函数的 hostElement
参数:
<html>
<head>
<!-- ... -->
<script src="flutter.js" defer></script>
</head>
<body>
<!-- Ensure your flutter target is present on the page... -->
<div id="flutter_host">Loading...</div>
<script>
window.addEventListener("load", function (ev) {
_flutter.loader.loadEntrypoint({
onEntrypointLoaded: async function(engineInitializer) {
let appRunner = await engineInitializer.initializeEngine({
// Pass a reference to "div#flutter_host" into the Flutter engine.
hostElement: document.querySelector("#flutter_host")
});
await appRunner.runApp();
}
});
});
</script>
</body>
</html>
要了解更多,请查看 自定义 Web 应用的初始化。
Iframe
你可以使用 iframe
标签将 Flutter web 应用内嵌到一个网页里。请参照下面的例子,将 URL 替换成实际的地址:
<iframe src="URL"></iframe>
部署到 Web 端
等你准备好部署应用时,将 release 包上传到 Firebase、云或者是类似服务上:
PWA Support
从 1.20 版开始,用于 Web 应用程序的 Flutter 模板包括了对可安装且具有离线功能的 PWA 应用程序所需的核心功能的支持。基于 Flutter 的 PWA 的安装方式与其他基于 Web 的 PWA 基本相同;由 manifest.json
提供的配置信息可以声明您的 Flutter 应用程序是 PWA,该文件可以在 web
目录中使用 Flutter create
命令生成。
对 PWA 的支持仍在进行中,因此,如果您发现不正确的地方,欢迎 给予我们反馈。