Flutter Web部署Django服务器：main.dart.js未按Base HREF加载资产

核心问题原因 #

Flutter Web的main.dart.js加载资产（如FontManifest.json、AssetManifest.bin）时，路径是基于构建时指定的base href生成的。如果构建时未正确配置，即使index.html里手动设置了base href，main.dart.js仍会使用默认的相对路径，导致Django无法找到对应资产。

Flutter层面的解决方案 #

1. 构建时指定base href参数 #

这是最直接有效的方案，构建Flutter Web时通过参数指定资产的根路径，确保main.dart.js加载资产时使用正确的前缀：

flutter build web --base-href "/static/flutter_web/"

• 替换/static/flutter_web/为你的Flutter Web产物在Django static目录下的实际路径（比如你把构建后的build/web目录内容放到static/flutter_web，就用这个路径）。
• 构建完成后，index.html会自动生成正确的<base href="/static/flutter_web/">，同时main.dart.js里的资产请求路径会自动带上这个前缀，不会再用当前页面的相对路径。

2. 预配置web/index.html模板的base href #

如果需要固定base href，可在Flutter项目的web/index.html中提前设置，构建时无需再传参数：

<head>
  <!-- 其他head内容 -->
  <base href="/static/flutter_web/">
</head>

• 注意：如果构建时同时传了--base-href参数，会覆盖这里的设置，按需选择即可。

3. 确保pubspec.yaml的资产配置正确 #

检查Flutter项目的pubspec.yaml，确认所有需要加载的资产（字体、静态文件）都已正确声明，避免构建时遗漏生成资产清单：

flutter:
  assets:
    # 声明你的静态资产目录
    - assets/images/
    - assets/icons/
  fonts:
    # 声明字体文件
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Regular.ttf
        - asset: fonts/Roboto-Bold.ttf
          weight: 700

• 配置完成后，重新执行构建命令，Flutter会自动生成正确的AssetManifest.bin和FontManifest.json，并确保main.dart.js能正确找到它们。

Django侧配合配置 #

确保Django能正确服务static目录的文件：

• 在settings.py中设置：

  STATIC_URL = '/static/'
  # 生产环境需要设置STATIC_ROOT，执行collectstatic收集静态文件
  STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
  # 开发环境DEBUG=True时，Django会自动服务static目录
  

• 将Flutter构建后的build/web目录下的所有文件，复制到Django项目的static/flutter_web目录（或你指定的路径）。

避免的错误操作 #

不要直接修改main.dart.js中的资产路径，因为Flutter重新构建时会覆盖该文件，且容易破坏其他逻辑（比如外部API请求的路径）。

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