Flutter Web Release模式打开本地index.html显示空白屏求助

核心原因 #

直接通过file://协议打开本地index.html时，浏览器的安全策略会限制资源加载，同时Flutter Web默认的绝对路径配置也会导致资源找不到，从而出现空白屏。

解决方案 #

• 调整Base Href配置
  打开项目根目录下的web/index.html，找到<base href="/">标签，将其修改为<base href="./">（相对路径）。修改完成后重新执行flutter build web --release，此时构建出的资源会以相对路径加载，适配本地文件打开的场景。

• 使用本地静态服务器运行
  浏览器对file://协议的限制较多，推荐用静态服务器来运行构建后的文件：

  • Python环境：进入project/build/web目录，执行python -m http.server 8080，然后在浏览器访问http://localhost:8080
  • Node.js环境：先全局安装http-server（npm install -g http-server），再进入目标目录执行http-server -p 8080
    这种方式更贴近实际线上部署的环境，也能避免本地文件协议的限制。

• 检查构建资源完整性
  确保flutter build web --release执行过程无报错，build/web目录下的assets文件夹、flutter.js、main.dart.js等核心文件都完整生成。如果构建有报错，先修复对应问题后重新构建。

• 排查浏览器控制台错误
  打开空白页后按F12调出开发者工具，查看Console面板的报错信息：

  • 如果出现Failed to load resource: net::ERR_FILE_NOT_FOUND，说明资源路径错误，对应调整Base Href即可
  • 如果出现CORS相关报错，说明浏览器安全策略限制，改用静态服务器运行即可

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