flutter打包流程

1001101_QIA2026-08-03 18:18

本文记录在windows系统中，使用flutter框架开发的应用，web版本打发布包的流程。

如果还没有显式启用过 Web 支持，在终端（CMD 或 PowerShell）中运行以下命令：

复制代码

flutter config --enable-web

然后运行 flutter doctor，确保 Chrome / edge 已列在可用设备中。

在打包之前，清理之前的构建缓存并重新拉取最新的依赖包，以避免出现缓存问题：

复制代码

flutter clean
flutter pub get

在你的项目根目录下运行构建命令。Flutter 默认会以 Release 模式 构建 Web 应用。

基础打包命令：

复制代码

flutter build web

高级选项：选择 Web 渲染器 (Web Renderer) Flutter Web 提供了不同的渲染引擎，你可以根据需求在打包时进行指定：

CanvasKit（默认选项）：使用 WebAssembly 和 WebGL 渲染，性能最好，UI 与移动端保持高度一致，但首次加载需要额外下载一个 WebAssembly 文件（体积稍大）。

Bash
复制代码
```
flutter build web --web-renderer canvaskit
```
HTML：使用标准 HTML 元素、CSS 和 Canvas。应用体积较小，对老旧浏览器兼容性更好，但在某些复杂 UI 下性能不如 CanvasKit。

Bash
复制代码
```
flutter build web --web-renderer html
```

打包完成后，终端会提示构建成功。所有的发布包文件都会生成在你的项目目录下的这个路径中： 项目根目录\build\web

这个 web 文件夹包含了部署所需的所有静态文件（如 index.html、main.dart.js、assets 文件夹等）。只需要将整个 web 文件夹上传到Web 服务器即可。

PS: 如果是本地项目作为后端，做法是将web文件夹映射为http静态资源目录。 HTTP 静态资源服务可以分发 Flutter Web 的 index.html、js、css 资源。

cpp 复制代码

    HttpService router;
    router.document_root="./web";
    Router::RegisterAll(router);