flutter build web未生成新构建产物 release模式仍显示旧计数器应用

问题根因 #

该问题由项目缓存残留、web目录配置异常、构建流程不规范三类原因导致，不需要每次构建都删除web目录，按以下步骤操作即可解决：

解决方案 #

• 构建前统一清理残留产物
  每次构建前依次执行以下命令：

  flutter clean
  # 手动删除历史构建目录，Windows系统替换为 rd /s /q build\web
  rm -rf build/web
  

• 校验web目录配置
  打开项目根目录下web/index.html文件，确认两项配置：
  1. <base href="/">取值和你的站点部署路径匹配，部署在根域名保持默认/即可，部署在子路径要修改为对应子路径
  2. 页面内引用的main.dart.js等资源路径没有硬编码旧的计数器应用相关配置
• 执行标准构建命令
  构建时指定release模式和对应参数，示例命令：

  # 根路径部署用这个命令
  flutter build web --release
  # 子路径部署需要加--base-href参数，示例：flutter build web --release --base-href "/demo/"
  

• 构建后本地验证
  不要用flutter run -d Chrome --release验证，直接用本地静态服务启动build/web目录预览效果，避免IDE本地缓存干扰验证结果：
  可以用任意静态服务工具，比如npm的serve包，执行serve build/web后访问对应端口查看是否为最新版本
• 部署后处理缓存
  GitHub Pages自带CDN缓存，部署完成后按Ctrl+Shift+R强制刷新页面清理本地浏览器缓存即可看到最新版本，也可以在web/index.html的head标签内添加缓存控制配置，避免后续用户访问到旧版本：

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  

之前删除web目录重建有效的原因是旧web目录下残留了初始化阶段生成的计数器应用的入口配置、静态资源，重建后所有配置重置为当前项目的适配版本，按上述流程规范操作后无需重复删除web目录。

内容的提问来源于stack exchange，提问作者Drawn