Flutter Web使用go_router部署cPanel时路由重定向失效问题

• 第一步：修正Flutter编译参数
  部署前重新编译Web产物，根域名托管场景必须指定base-href为根路径，执行命令：
  flutter build web --release --base-href "/"
  如果站点部署在域名的子路径下（比如www.website.com/app），把参数改成对应子路径即可，注意末尾必须带斜杠。编译完成后将build/web目录下的所有文件（含隐藏文件）完整上传到cPanel站点根目录，通常为public_html文件夹，不要额外嵌套子目录。
• 第二步：弃用cPanel后台的「重定向」功能
  之前配置的重定向属于3xx客户端跳转，会修改浏览器地址栏，完全不符合单页应用的路由rewrite需求，所有之前配置的重定向规则全部删除。
• 第三步：配置Apache重写规则
  在站点根目录（和index.html同层级）新建名为.htaccess的隐藏配置文件，写入以下规则：

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    # 直接返回index.html本身，避免循环重写
    RewriteRule ^index\.html$ - [L]
    # 如果请求路径不是已存在的文件、不是已存在的目录，统一内部重写到index.html
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>
  

  这套规则不会修改浏览器地址栏，会把所有前端路由的请求交给Flutter入口文件处理，静态资源（js、图片、字体等）因为真实存在于服务器上，会直接正常返回，不会被重写。
• 第四步：排查Bad State: No Element异常
  这个报错通常由两个原因导致：
  1. 重写规则错误，把静态资源请求也转发到了index.html，导致js脚本加载失败，用上面给出的.htaccess规则即可解决
  2. 文件上传不完整或权限错误：检查是否漏传main.dart.js、flutter.js、flutter_service_worker.js等核心文件，将站点文件权限设为644、文件夹权限设为755即可。
• 最后验证：清空浏览器缓存、cPanel自带的LiteSpeed/CDN缓存后，直接在地址栏输入子路径测试路由即可正常访问。

注意：Flutter Web编译后是纯静态资源，不需要配置Node.js、Dart运行环境，不要将其部署为动态应用。

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