Flutter Web部署至正式服务器后URL路由重定向报404问题

本地调试时Flutter内置的开发服务器默认做了路径兜底配置，所有路径请求都会统一返回入口文件index.html，因此带路径的URL可以正常加载页面。部署到正式服务器后，默认的静态服务规则不会做这个兜底：当你直接访问子路径URL时，服务器会直接在文件系统里查找对应路径的物理文件，找不到就直接返回404，请求根本不会到达Flutter应用层，和你使用的advanced_url插件、Flutter业务代码没有关系。

核心配置逻辑非常统一：给Web服务器加路径重写规则，所有非静态资源（js、css、图片、字体等实际存在的文件）的请求，全部重定向到Web应用根目录的index.html，后续路由解析交给Flutter前端路由处理即可。

下面是常见部署场景的具体配置：

• Nginx部署
  找到站点对应的Nginx配置文件，在/web/路径匹配块中添加try_files规则，参考配置如下：

  location /web/ {
    # 替换为你服务器上实际存放Flutter Web构建产物的绝对路径
    alias /data/www/your_flutter_app/build/web/;
    try_files $uri $uri/ /web/index.html;
  }
  

  保存后执行nginx -s reload重载配置即可生效。

• Apache部署
  在Flutter Web构建产物的根目录（和index.html同级）新建.htaccess文件，写入如下重写规则：

  RewriteEngine On
  RewriteBase /web/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /web/index.html [L]
  

  提前确认Apache已经开启了rewrite模块，否则规则不会生效。

• Firebase Hosting部署
  在项目根目录的firebase.json配置文件中添加重写规则：

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

  保存后重新执行firebase deploy完成部署即可。

• 云存储/CDN类静态托管（阿里云OSS、腾讯云COS、Vercel、Netlify等）
  直接在对应服务商控制台的「重写规则」「回源配置」页面，添加规则：所有匹配/web/*的请求，当目标文件不存在时，统一兜底返回/web/index.html即可。

注意：你代码中调用的setPathUrlStrategy()作用是移除URL中的#哈希标记，这个配置本身没有问题，不需要改回哈希路由模式，只要服务器重写规则配置正确，PathUrlStrategy在正式环境可以正常运行。

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