fpack build web runs flutter build web and zips build/web into
my_app-1.0.0+1-web.zip, ready for any static host. Web builds work on every operating system and need only Flutter.
1. Build#
fpack build web
2. Serve from a sub-path#
When the app is not at the root of the domain (for example https://example.com/app/), set the base href. It must start and end with
/:
fpack build web --base-href /app/
In fpack.yaml: web.base_href.
3. WebAssembly#
fpack build web --wasm # compile to WebAssembly (with JavaScript fallback)
In fpack.yaml: web.wasm: true.
4. More options#
Everything else lives in fpack.yaml under web:
web:
base_href: /app/
source_maps: true # generate source maps
csp: true # no dynamic code generation (Content-Security-Policy)
optimization_level: 2 # dart2js / dart2wasm -O0 … -O4 (default 4)
static_assets_url: https://cdn.example.com/app/ # serve assets from another domain (must end with /)
web_resources_cdn: false # bundle CanvasKit instead of loading it from the CDN
web_define: { API_URL: https://api.example.com } # --web-define values for web/index.html
extra_args: [--dump-info]
Pass other flutter arguments after --: fpack build web --base-href /app/ -- --no-web-resources-cdn.
Note
Flavors are not used for web builds (Flutter supports them on Android, iOS and macOS only). Use --dart-define
or build.dart_define_from_file (Flavors, entry points and defines).
5. Deploy#
Unzip the artifact on your host, or deploy it from a hook, for example post_package.web
calling rsync, or in CI with peaceiris/actions-gh-pages for GitHub Pages:
hooks:
post_package:
web: ['rsync -a --delete build/web/ user@host:/var/www/app/']
In CI#
See CI recipes.
fpack build web 运行 flutter build web，并把 build/web 压缩成 my_app-1.0.0+1-web.zip，可直接部署到任何静态主机。Web 构建在所有操作系统上都能用，只需要 Flutter。
1. 构建#
fpack build web
2. 部署在子路径#
当应用不在域名根路径（例如 https://example.com/app/）时，设置 base href。它必须以 / 开头和结尾：
fpack build web --base-href /app/
在 fpack.yaml 里：web.base_href。
3. WebAssembly#
fpack build web --wasm # 编译为 WebAssembly（带 JavaScript 回退）
在 fpack.yaml 里：web.wasm: true。
4. 更多选项#
其余设置都在 fpack.yaml 的 web 下：
web:
base_href: /app/
source_maps: true # 生成 source map
csp: true # 不做动态代码生成（Content-Security-Policy）
optimization_level: 2 # dart2js / dart2wasm 的 -O0 … -O4（默认 4）
static_assets_url: https://cdn.example.com/app/ # 从另一个域名提供静态资源（必须以 / 结尾）
web_resources_cdn: false # 把 CanvasKit 打进包里，而不是从 CDN 加载
web_define: { API_URL: https://api.example.com } # 给 web/index.html 的 --web-define 值
extra_args: [--dump-info]
其他 flutter 参数写在 -- 之后：fpack build web --base-href /app/ -- --no-web-resources-cdn。
说明
Web 构建不使用 flavor（Flutter 只在 Android、iOS 和 macOS 上支持）。请使用 --dart-define 或 build.dart_define_from_file（Flavor、入口与编译变量）。
5. 部署#
把产物解压到你的主机上，或者用钩子部署，例如让 post_package.web 调用 rsync，或在 CI 里用
peaceiris/actions-gh-pages 发布到 GitHub Pages：
hooks:
post_package:
web: ['rsync -a --delete build/web/ user@host:/var/www/app/']
在 CI 中#
见 CI 示例。