Flutter Web构建产物无法直接打开，如何正确运行？

直接打开index.html空白的原因 #

浏览器使用file://协议加载本地文件时，会触发跨域资源共享（CORS）限制，同时Flutter Web的资源引用路径是基于HTTP协议设计的，直接打开本地文件会导致JS脚本、静态资源加载失败，最终显示空白页面。

运行Flutter Web网站的正确方式 #

1. 使用Python内置HTTP服务器 #

这是最简便的本地测试方式：

• 打开终端，切换到build/web目录（执行cd build/web）
• 运行命令：

  # Python 3
  python -m http.server 8000
  # Python 2
  python -m SimpleHTTPServer 8000
  

• 在浏览器地址栏输入http://localhost:8000，即可正常访问网页。

2. 使用Flutter官方命令启动 #

如果已经完成构建，直接通过Flutter命令启动调试服务器：

flutter run -d chrome --release

该命令会自动加载build/web中的产物，并在Chrome中打开页面。

3. 部署到静态托管服务 #

如果需要对外发布，可将build/web下的所有文件上传到静态文件托管服务（如Nginx、Apache、Netlify等），服务会以HTTP/HTTPS协议提供资源访问，避免本地文件协议的限制。

关于python -m http.server 8000的作用说明 #

这条命令的核心是启动一个本地HTTP服务器：

• 它会把终端当前所在的目录设为服务器的根目录，当你在build/web下运行时，服务器就会将该目录下的index.html、图标、JS脚本等作为可访问的静态资源。
• 浏览器通过http://localhost:8000访问时，服务器会按HTTP协议返回对应文件，绕过了file://协议的加载限制，确保Flutter Web的资源能正常加载渲染。

如果运行服务器后仍有问题，检查控制台报错信息：若出现404错误，确认终端是否在正确的build/web目录下；若出现CORS错误，确保所有资源路径引用正确（Flutter构建时已自动处理路径，通常无需手动修改）。

内容的提问来源于stack exchange，提问作者Uwe.Schneider