如何在子文件夹中托管Flutter Web应用？

• 编译阶段指定基础路径
  不要直接执行默认的flutter build web，必须加上对应子文件夹的基础路径参数，针对你的pagamenti子文件夹，执行命令：
  flutter build web --base-href "/pagamenti/"
  这个命令会自动修改生成的index.html里的<base href="/">为<base href="/pagamenti/">，这是解决资源加载错误的核心步骤，很多人会忽略这一步。

• 修正Web Manifest的start_url
  打开web/manifest.json，把start_url改成和基础路径一致的绝对路径，比如：

  {
    "start_url": "/pagamenti/",
    // 其他原有配置保持不变
  }
  

  避免使用./pagamenti这类相对路径，绝对路径更适配不同路由场景。

• 主机服务器的路由配置
  这一步是解决页面刷新404的关键：

  • 如果用Apache服务器，在pagamenti子文件夹下新建.htaccess文件，写入以下内容：

    <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /pagamenti/
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /pagamenti/index.html [L]
    </IfModule>
    

  • 如果用Nginx服务器，修改站点配置文件，添加对应子文件夹的规则：

    location /pagamenti/ {
      try_files $uri $uri/ /pagamenti/index.html;
    }
    

• 验证部署结果
  上传编译后的build/web文件夹内容到主机的pagamenti子目录，访问你的域名/pagamenti，检查浏览器控制台是否还有资源加载错误，同时测试页面刷新、路由跳转功能是否正常。

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