flutter build web构建后打开index.html仅显示空白页问题求助

核心原因 #

• Flutter Web 默认使用路径URL策略，资源依赖路径默认基于站点根目录配置，直接通过file://协议打开本地build/web/index.html时，浏览器无法正确解析绝对路径的资源，导致js、静态资源加载失败。
• 浏览器对file://协议的静态页面有严格的跨域限制，Flutter Web的运行逻辑依赖http/https协议环境，file协议下会触发跨域报错导致页面完全空白。

可用解决方法 #

方案1：本地启动HTTP服务访问（推荐，适配所有部署场景） #

构建完成后进入build/web目录，用任意静态HTTP服务启动即可正常访问，常用的快速启动方式：

• Node.js 环境：执行 npx serve
• Python3 环境：执行 python -m http.server 8000
• Python2 环境：执行 python -m SimpleHTTPServer 8000
  服务启动后访问对应本地端口地址（如http://localhost:8000）即可正常加载页面。

方案2：构建时指定相对路径配置 #

如果需要直接双击打开本地index.html访问，构建时添加参数指定相对路径基准：
flutter build web --base-href "./"
构建完成后直接打开build/web/index.html即可正常加载。

注意：该方案会使用相对路径寻址，若后续要将产物部署到服务器子目录，需要将--base-href的参数调整为对应子目录路径，比如部署到https://yourdomain.com/flutter-app/时，参数应为--base-href "/flutter-app/"。

方案3：手动修改base标签配置 #

你也可以直接修改项目中web/index.html文件的base标签，将默认的
<base href="/">
修改为
<base href="./">
修改后正常执行flutter build web即可，效果和方案2一致。

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