Flutter Web部署NodeJS后深层路由白屏，跨浏览器表现异常

API 探路者

2026-8-8

Flutter Web PathUrlStrategy 深层路由部署AWS ECR白屏问题解决

核心问题

使用PathUrlStrategy()的Flutter Web应用（stable@3.3.9）部署到AWS ECR后，Chrome/Edge访问深层路由（如/user/fun_username）时，浏览器会从子路由路径请求main.dart.js（比如/user/main.dart.js），导致资源加载失败；Firefox因相对路径解析逻辑不同可正常访问。本地及Docker Desktop运行正常，仅ECR部署后出现问题。

解决方案

1. 修正Web资源引用路径

修改web/index.html中所有资源的引用为绝对路径：

将<script src="main.dart.js" type="application/javascript"></script>改为<script src="/main.dart.js" type="application/javascript"></script>
同步修改manifest.json、favicon.ico等其他资源的引用，确保均以/开头

2. 配置Express服务器的静态资源与Fallback路由

确保Express正确托管静态资源，并将所有路由请求 fallback 到index.html：

const express = require('express');
const path = require('path');
const app = express();

// 托管Flutter Web构建产物，指定根路径为静态资源基准
app.use(express.static(path.join(__dirname, 'build'), {
  // 为静态资源设置缓存策略（可选）
  setHeaders: (res, filePath) => {
    if (filePath.match(/\.(js|css|svg|png)$/)) {
      res.setHeader('Cache-Control', 'public, max-age=31536000');
    }
  }
}));

// 所有路由请求返回index.html，支持PathUrlStrategy的前端路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});