使用Fermyon Spin部署Flutter Web SPA遇白屏问题求助

修复步骤 #

1. 调整Flutter Web资源基础路径 #

Flutter默认从根路径加载静态资源，但你的Spin路由是/static，需要让Flutter知道资源要从这个子路径请求。执行带--base-href参数的构建命令：

cd fermyon_flutter_test
flutter build web --release --base-href "/static/"
cd ..

或者手动修改Flutter项目下的web/index.html，将<base href="/">替换为<base href="/static/">，再重新执行构建。

2. 配置Spin静态文件服务器的默认文档 #

打开Spin项目根目录的spin.toml，在组件的trigger配置中添加default_document，确保访问/static时自动返回index.html，同时确认files配置正确：

[[component]]
id = "fermyon_flutter_test"
source = { url = "https://github.com/fermyon/spin-fileserver/releases/download/v1.5.1/spin_static_fs.wasm", digest = "sha256:..." }
environment = { "SPIN_STATIC_FS_ROOT" = "/" }
files = [{ source = "fermyon_flutter_test/build/web/", destination = "/" }]
[component.trigger]
route = "/static/*"
# 新增默认文档配置
[component.trigger.config]
default_document = "index.html"

3. 重启服务并验证 #

回到Spin项目目录，执行spin up，然后访问http://127.0.0.1:3000/static，就能正常显示Flutter计数器应用了。

问题根源分析 #

从日志可以看到，浏览器请求了/flutter.js、/favicon.png等根路径资源，但Spin的静态文件服务器只监听/static/*路由，这些根路径请求无法匹配到组件，导致资源加载失败，页面空白。同时，未配置default_document时，访问/static不会自动返回index.html，也会导致入口文件无法正确加载。通过调整Flutter的基础路径和Spin的路由配置，就能让资源请求和路由匹配起来，解决空白页问题。

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