Flutter Web App部署Vercel时嵌套路由启动失败：MIME类型不支持

问题核心 #

访问嵌套路由（如/home/questionnaire）时，ServiceWorker被错误地尝试注册在/home/路径下而非根域名，导致注册失败，进而无法加载Flutter应用。Firebase Hosting默认适配了单页应用的路由和ServiceWorker配置，因此无此问题。

具体解决步骤 #

1. 手动指定ServiceWorker的根范围 #

修改web/index.html中的loadEntrypoint配置，强制设置ServiceWorker的scope为根路径：

window.addEventListener('load', function (ev) {
  console.log("LOAD!");
  _flutter.loader.loadEntrypoint({
    serviceWorker: {
      serviceWorkerVersion: serviceWorkerVersion,
      scope: "/" // 关键：手动指定根范围
    }
  }).then(function (engineInitializer) {
    console.log("INIT");
    return engineInitializer.initializeEngine();
  }).then(function (appRunner) {
    console.log("RUN");
    return appRunner.runApp();
  });
});

无论从哪个路由访问，ServiceWorker都会注册在根域名下，避免嵌套路由导致的范围错误。

2. 配置Vercel的单页应用重写规则 #

在项目根目录创建vercel.json文件，添加路由重写规则，确保所有嵌套路由请求都转发到index.html：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Vercel默认不会自动处理单页应用的嵌套路由，该配置让所有路径请求都由Flutter入口文件处理，同时保证ServiceWorker在正确上下文加载。

3. 验证ServiceWorker文件的可访问性 #

部署后，在浏览器Network面板检查flutter_service_worker.js（或对应生成的ServiceWorker文件）的请求状态，确保返回200。若路径错误，需确认Flutter构建输出路径配置正确，Vercel能正常托管该文件。

4. 清理浏览器缓存与旧ServiceWorker #

在浏览器开发者工具的Application面板中，删除已注册的ServiceWorker并清空缓存，再重新加载嵌套路由页面，避免旧缓存引发的异常。

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