Flutter Web项目通过VS Code的Go Live打开显示空白页，但flutter run -d chrome可正常运行

我之前也碰到过一模一样的问题，折腾了好一会儿才搞明白问题出在哪，咱们来一步步解决：

核心问题分析 #

flutter run -d chrome会自动处理Flutter Web的资源路径和服务配置，但VS Code的Live Server只是个简单的静态文件服务器，它不会帮你处理Flutter的路径映射，再加上你的index.html里的base href配置不对，就导致资源加载失败，出现空白页和控制台的错误。

具体解决方案 #

1. 确保使用构建后的产物并正确设置base href

你提到试过打开web/index.html，这个是Flutter的源码模板文件，不是可直接运行的产物！必须用flutter build web构建后的build/web文件夹里的文件。

然后修改build/web/index.html里的<base href>：
把原来的

<base href="/build/web/">

改成

<base href="./">

或者更稳妥的是，构建的时候直接指定base href，这样就不用手动修改了：

flutter build web --base-href "./"

这个配置告诉浏览器，所有资源都从当前index.html所在的目录加载，和Live Server的静态服务逻辑完全匹配。

2. 正确设置Live Server的根目录

不要直接右键点击build/web/index.html选择"Open with Live Server"，而是在VS Code中打开build/web文件夹（或者把这个文件夹设为工作区），然后点击Go Live按钮。这样Live Server会把build/web作为服务器的根目录，资源路径就完全对应上了。

3. 解决控制台的Uint8Array错误

你看到的Uncaught Error: Invalid argument(s): Invalid typed array length: 1008807213其实是路径错误导致的连锁反应——因为资源（比如时区数据库文件）没加载到正确内容（可能返回了404的HTML页面），解析的时候把错误内容的长度当成了数组长度，直接溢出了。只要上面的路径问题解决了，这个错误自然就消失了。

额外验证步骤 #

• 启动Live Server后，打开浏览器控制台的Network标签，查看所有.js、图标、manifest等资源是不是都返回200状态码，如果有404，说明路径还是不对，再调整base href或者Live Server的根目录。
• 如果你用的是最新版Flutter，构建时可以加上--release参数生成更优化的产物：flutter build web --release --base-href "./"

内容来源于stack exchange