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: 设置环境变量 ENVprod,可以在应用中通过 String.fromEnvironment('ENV') 访问。

部署时需要注意:

  1. Web服务器配置

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

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

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

相关推荐
2501_9445215917 分钟前
Flutter for OpenHarmony 微动漫App实战:分享功能实现
android·开发语言·javascript·flutter·ecmascript
猛扇赵四那边好嘴.17 分钟前
Flutter 框架跨平台鸿蒙开发 - 星座运势详解:探索星座奥秘
flutter·华为·harmonyos
不会写代码00025 分钟前
Flutter 框架跨平台鸿蒙开发 - 实时快递柜查询:智能管理包裹取寄
flutter·华为·harmonyos
A懿轩A33 分钟前
【2026 最新】Flutter 编译开发 OpenHarmony 工程目录结构全解析
flutter·harmonyos·openharmony·开源鸿蒙
2501_944521591 小时前
Flutter for OpenHarmony 微动漫App实战:标签筛选功能实现
android·开发语言·前端·javascript·flutter
kirk_wang1 小时前
Flutter艺术探索-Hive高性能存储:NoSQL数据库实战
flutter·移动开发·flutter教程·移动开发教程
不会写代码0001 小时前
Flutter 框架跨平台鸿蒙开发 - 免费英语口语评测:AI智能发音纠正
人工智能·flutter·华为·harmonyos
Miguo94well2 小时前
Flutter框架跨平台鸿蒙开发——失物招领APP的开发流程
flutter·华为·harmonyos
小风呼呼吹儿2 小时前
Flutter 框架跨平台鸿蒙开发 - 全国公积金查询:智能公积金管理助手
flutter·华为·harmonyos
zilikew2 小时前
Flutter框架跨平台鸿蒙开发——小说人物生成APP开发流程
flutter·华为·harmonyos·鸿蒙