如何使用Django服务端部署已构建完成的Flutter web应用？

1. 处理Flutter Web构建产物 #

• 找到Flutter项目下的build/web目录，目录内所有文件就是已构建完成的静态资源，包含html、js、css、资源文件等。
• 将整个web目录复制到Django项目根目录下，可重命名为flutter_web避免和Django自带目录冲突，方便后续配置。

2. 修改Django项目配置 #

打开Django项目的settings.py文件，做两处调整：

• 调整模板路径配置，在TEMPLATES配置项的DIRS列表中添加Flutter构建产物的目录路径：

TEMPLATES = [
    {
        # 原有其他配置保持不变
        'DIRS': [BASE_DIR / 'flutter_web'], # 路径对应你存放Flutter构建产物的目录
    },
]

• 调整静态文件查找路径，在STATIC_URL配置下方新增：

STATICFILES_DIRS = [
    BASE_DIR / 'flutter_web',
]
# 生产环境部署需提前配置好`STATIC_ROOT`，后续执行静态资源收集命令会用到

3. 配置Django路由规则 #

打开Django项目的主urls.py文件，新增路由规则，注意后端接口、admin等原生Django路由必须放在Flutter路由前面，避免被拦截：

from django.views.generic import TemplateView

urlpatterns = [
    # 原有Django路由放在前面，比如后台、接口路由
    path('admin/', admin.site.urls),
    path('api/', include('your_app.urls')),
    # 最后添加Flutter页面路由，匹配所有前端路由交给Flutter处理
    path('', TemplateView.as_view(template_name='index.html')),
]

4. 测试与生产部署注意事项 #

• 本地测试直接执行python manage.py runserver，访问localhost:8000即可打开Flutter Web应用。
• 生产环境部署前，先执行python manage.py collectstatic将所有静态资源收集到STATIC_ROOT指定的目录，再配合Nginx/Apache处理静态资源请求，性能更高。
• 如果你需要将Flutter应用部署在非根路径（比如/app路径下），构建Flutter应用时需要添加参数flutter build web --base-href "/app/"，Django路由也要对应修改为path('app/', TemplateView.as_view(template_name='index.html'))。

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