Flutter Web应用本地运行正常 部署hPanel服务器后白屏如何解决

修复步骤 #

• 检查构建参数配置
  Flutter Web 默认使用相对路径加载静态资源，如果部署在站点子目录，会出现资源找不到的问题。构建时指定对应路径即可：
  部署在根目录执行：flutter build web --release --base-href "/"
  部署在/demo等子目录执行：flutter build web --release --base-href "/demo/"
  注意路径前后的斜杠必须保留。
• 补充hPanel MIME类型配置
  Flutter Web 依赖的.wasm格式文件如果没有配置对应MIME类型会加载失败，你可以直接在站点根目录新建.htaccess文件添加以下配置：

AddType application/wasm .wasm
AddType application/javascript .js
AddType application/json .json
也可以直接在hPanel的站点管理后台找到MIME类型配置项，手动添加上述规则。

• 清理缓存并完整上传构建产物
  执行构建命令后，需要将build/web目录下的所有文件（包括assets目录、隐藏的.htaccess文件、flutter.js、main.dart.js、index.html等）完整上传到hPanel对应的站点目录，不要漏传文件。上传完成后清理hPanel的站点缓存、浏览器本地缓存后再访问测试。
• 检查跨域配置
  如果项目内调用了第三方接口、跨域静态资源，本地运行时没有跨域限制所以正常，部署后hPanel默认的安全规则会拦截跨域请求。可以在.htaccess文件中添加对应的跨域允许规则，或者将接口调整为同域名部署。

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