如何构建半Flutter应用（部分HTML、部分Flutter）

1. 基于路径的反向代理路由（推荐方案） #

无需拆分到子域名，通过反向代理（如Nginx、Apache）按URL路径区分请求，将应用模块路由到Flutter服务，静态页面路由到HTML静态文件服务器。

Nginx配置示例： #

server {
    listen 80;
    server_name yourdomain.com;

    # 静态HTML页面路由（博客、维基等）
    location /blog/ {
        root /path/to/your/html/files;
        index index.html;
    }

    location /wiki/ {
        root /path/to/your/html/files;
        index index.html;
    }

    location / {
        # 欢迎页单独处理
        if ($request_uri = '/') {
            root /path/to/your/html/files;
            index welcome.html;
            break;
        }
        # 其余路径路由到Flutter应用
        proxy_pass http://localhost:8080; # Flutter服务运行地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

该方案优势：

• 保持统一域名，用户体验连贯
• 同域名下无需额外跨域配置
• 静态HTML页面天然适配SEO优化

2. 在HTML页面中嵌入Flutter Web组件 #

如果部分HTML页面需要集成Flutter功能，可将Flutter Web打包后通过<script>标签直接嵌入，无需单独部署。

实现步骤： #

1. 构建Flutter Web应用：flutter build web --release
2. 将构建产物中的main.dart.js及相关资源复制到HTML项目目录
3. 在目标HTML页面中添加嵌入代码：

<div id="flutter-container"></div>
<script src="flutter/main.dart.js" type="application/javascript"></script>
<script>
  _flutter.loader.loadEntrypoint({
    onEntrypointLoaded: async function(engineInitializer) {
      const appRunner = await engineInitializer.initializeEngine({
        hostElement: document.getElementById('flutter-container')
      });
      await appRunner.runApp();
    }
  });
</script>

注意事项：

• 可通过window.postMessage实现Flutter与HTML的通信
• 避免在大量静态页面中嵌入Flutter，防止加载性能下降

3. Flutter应用内嵌入HTML内容 #

若核心应用为Flutter，仅需展示少量HTML内容（如博客文章），可使用webview_flutter插件在Flutter中加载HTML页面或URL。

代码示例： #

import 'package:webview_flutter/webview_flutter.dart';

class BlogWebView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: '/blog/post1', // 同域名下的HTML路径
      javascriptMode: JavascriptMode.unrestricted,
    );
  }
}

该方案适合以Flutter为主体的场景，但需注意WebView内的内容无法被搜索引擎抓取，不利于SEO。

对比子域名方案 #

你提到的子域名方案虽可行，但存在明显缺点：

• 跨域通信需额外配置CORS规则
• 用户感知到域名切换，体验割裂
• 增加部署和维护的复杂度

综上，基于路径的反向代理路由是最平衡的方案，既保持域名统一，又能充分发挥Flutter和HTML各自的优势。

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