Flutter Web 为何出现404错误？附报错信息与代码片段

报错信息 #

加载资源失败：服务器返回404状态码
(index):50 未捕获引用错误：_flutter 未定义
位于 (index):50:7

对应的页面脚本：

<script>
window.addEventListener('load', function(ev) {
  // Download main.dart.js
  _flutter.loader.loadEntrypoint({
    serviceWorker: {
      serviceWorkerVersion: serviceWorkerVersion,
    }
  }).then(function(engineInitializer) {
    return engineInitializer.initializeEngine();
  }).then(function(appRunner) {
    return appRunner.runApp();
  });
});
</script>

原因及解决步骤 #

• 资源路径不匹配：404错误说明Flutter核心资源（如main.dart.js）找不到。
  • 若部署在服务器根目录，确保把flutter build web生成的build/web下所有文件完整上传到服务器根目录。
  • 若部署在子路径，构建时必须指定基础路径：flutter build web --base-href "/你的子路径/"，同时服务器要配置该子路径可访问静态资源。
• _flutter未定义是连锁问题：这个错误是因为Flutter初始化脚本（flutter.js）未加载成功（404导致），解决完资源加载问题后，该错误会自动消失。
• 服务器路由配置：Flutter Web是单页应用，服务器需要配置路由 fallback 到index.html，避免页面跳转时出现404。以Nginx为例：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• 验证构建产物：检查build/web目录下是否存在main.dart.js、flutter.js等核心文件，确认构建过程无报错。

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