如何在本地局域网中部署托管Flutter Web应用？

Flutter执行flutter build web后生成的产物默认存放在项目根目录的build/web路径下，均为静态资源，只需选择任意静态Web服务器将该目录作为资源根目录托管即可，以下是针对局域网访问场景的不同方案：

快速临时调试方案 #

适合开发阶段临时在局域网内预览测试，无需复杂配置：

• Python环境可用：直接进入build/web目录，执行对应命令启动服务
  • Python2版本：python -m SimpleHTTPServer 8080
  • Python3版本：python3 -m http.server 8080
• Node.js环境可用：先全局安装serve工具npm install -g serve，进入build/web目录后执行serve -p 8080

服务启动后，局域网内其他设备访问「本机局域网IP+8080端口」即可打开应用，例如本机IP为192.168.3.20时，访问地址为http://192.168.3.20:8080。

长期稳定部署方案 #

适合固定在局域网内持续提供服务的场景，稳定性更高：

• Windows系统可选：
  • 小皮面板：安装后新建站点，将站点根目录设置为build/web路径，自定义端口后绑定本机局域网IP即可直接使用。
  • IIS：开启系统IIS功能后添加站点，物理路径指向build/web目录，配置对应端口后需在MIME类型中添加对wasm、js、json等Flutter Web依赖资源格式的支持。
• macOS/Linux系统可选：
  • Nginx：安装Nginx后修改配置文件，参考如下配置调整路径和端口：

  server {
      listen 8080;
      server_name _;
      root /你的/实际/路径/build/web;
      index index.html;
      location / {
          try_files $uri $uri/ /index.html;
      }
  }
  

  配置完成后重启Nginx即可生效。
  • Apache：安装Apache后修改httpd.conf配置，将DocumentRoot指向build/web目录，配置Directory访问规则后重启服务即可。

• 启动服务前请确认本机防火墙已开放对应端口的入站规则，避免局域网其他设备无法访问。
• 若你修改过Flutter项目的base href配置，请确保其值和部署的路径前缀一致，根路径部署保持默认的/即可。

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