Flutter Web部署到子路径的打包指令

打包指令:

复制代码
flutter build web --web-renderer canvaskit --base-href /dev110/ --no-tree-shake-icons --dart-define=ENV=prod

参数说明:

  • --web-renderer canvaskit: 使用 canvaskit 渲染模式,可以提高图形和动画的质量。
  • --base-href /dev110/: 设置应用程序的基础路径为 /dev110/,这适合部署在子路径的情况。确保服务器支持路径下的静态资源。
  • --no-tree-shake-icons: 禁用图标的 tree shaking,确保所有图标资源在打包时保留。
  • --dart-define=ENV=prod: 设置环境变量 ENV 为 prod,可以在应用中通过 String.fromEnvironment('ENV') 访问。

部署时需要注意:

  1. Web服务器配置:

    • 确保服务器支持二级路由和 base-href 设置,例如在 Nginx 中配置静态资源的根目录为 /dev110/。
    • 配置路由重写规则,避免用户刷新页面时出现 404 错误。一般来说,应该重写所有路由请求到 index.html。
  2. 访问基础路径:

    • 在生产环境访问 https://your-domain.com/dev110/ 进行测试,确保所有资源加载正常。

这样就可以在指定路径上正常运行 Flutter Web 项目并且支持二级路由了。

相关推荐
yuanlaile7 小时前
2026年全新Flutter 跨平台开发全栈学习资料整理
flutter·getx·鸿蒙 next·flutter开发鸿蒙·flutter入门实战·flutter全栈
恋猫de小郭17 小时前
Genkit Dart 1.0 发布,Flutter 原生的 AI Agent 终于完整了
android·前端·flutter
第10086个小白17 小时前
flutter桌面端打包方式(Inno Setup Compiler)版本
前端·flutter
陆断枫1 天前
Flutter 3.47 动画引擎盘点:Impeller 全平台,和那些"新特性"
flutter
程序员老刘1 天前
Flet 1.0 思路很好,可惜来晚了
flutter·ai编程·客户端
m0_738185822 天前
Flutter 鸿蒙化实战:qr_code_scanner_plus 适配 OpenHarmony,二维码扫描
flutter·华为·harmonyos·鸿蒙
恋猫de小郭2 天前
Flutter + EmbeddingGemma 2,谷歌发布完全端侧的 AI Edge Foresight
android·前端·flutter
君赏2 天前
基于 FlutterPatch 快速接入 Flutter 热更新
flutter
律宏阔2 天前
Dart FFI 内存管理:用 using + Arena 替代嵌套 try-finally
前端·flutter
律宏阔2 天前
Flutter 调用 Go:从 c-shared + ffigen 到 @Native + Native Assets 踩坑记录
前端·flutter