Flutter Web部署后直接URL导航失效问题求助

核心原因 #

Flutter Web使用客户端路由，当直接访问子路径（如/privacy-policy）时，服务器会尝试寻找对应物理文件，找不到就返回404。必须配置服务器将所有路由请求转发到index.html，由Flutter客户端处理路由。

不同托管环境的配置方案 #

1. Apache服务器（.htaccess） #

如果你的服务器是Apache，按以下步骤操作：

• 确认服务器已启用mod_rewrite模块（主流主机一般默认开启，未开启需联系主机商或自行配置）
• 在项目根目录（与index.html同层级）创建/修改.htaccess文件，写入以下内容：

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

• 部署时确保.htaccess被正确上传到服务器根目录，避免被FTP工具忽略（这类文件默认隐藏）

2. Nginx服务器 #

修改站点配置文件（通常在/etc/nginx/sites-available/目录下），在location /块中添加：

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

修改后重启Nginx服务：sudo systemctl restart nginx

3. Netlify托管 #

在项目根目录创建_redirects文件，写入：

/*    /index.html   200

部署时Netlify会自动识别该配置

4. Vercel托管 #

在项目根目录创建vercel.json文件，写入：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

5. Firebase托管 #

仅Firebase托管需配置firebase.json，其他环境无需关注。配置内容如下：

{
  "hosting": {
    "public": "build/web",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

排查要点 #

• 配置文件必须和Flutter Web生成的index.html放在同一目录
• Apache环境需确认服务器开启AllowOverride All，否则.htaccess不生效
• 部署后清空浏览器缓存，避免旧缓存干扰测试

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