Flutter GetX Web应用部署后非首页路由返回404问题求助

Flutter Web是单页应用（SPA），所有路由逻辑都由前端处理。本地开发时，Flutter自带的服务器会自动把所有子路由请求重定向到index.html，但线上服务器默认会去寻找对应路径的物理文件（比如访问/terms时，服务器会找terms.html或terms文件夹），找不到就返回404。

解决方案1：配置服务器重定向规则 #

不同服务器的配置方式不同，以下是常见场景的配置：

Nginx #

修改Nginx站点配置文件，添加如下规则：

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

这条规则会让Nginx先尝试访问请求的文件或目录，若找不到则返回index.html，交给Flutter前端处理路由逻辑。

Apache #

在项目部署根目录创建.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>

注意要确保Apache开启了mod_rewrite模块。

Netlify #

在项目根目录创建_redirects文件，内容为：

/*    /index.html   200

Vercel #

在项目根目录创建或修改vercel.json，添加：

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

解决方案2：使用Hash路由（临时替代方案） #

如果暂时无法修改服务器配置，可以改用Hash路由模式，此时所有路由都会带上#前缀（比如domain.site/#/terms），服务器只会解析#之前的路径，不会处理后面的路由部分。

修改main.dart的路由配置：

void main() {
  runApp(
    GetMaterialApp(
      initialRoute: '/',
      // 启用Hash路由模式
      routeInformationParser: HashRouteInformationParser(),
      routerDelegate: GetDelegate(
        routeInformationParser: HashRouteInformationParser(),
      ),
      getPages: [
        GetPage(name: '/', page: () => HomePage()),
        GetPage(name: '/terms', page: () => TermsPage()),
        GetPage(name: '/:username', page: () => ProfilePage()),
      ],
    ),
  );
}

不过Hash路由会让URL格式不够友好，建议优先采用服务器重定向的方案。

验证 #

配置完成后，重启服务器（Nginx/Apache需重启），直接访问domain.site/terms或domain.site/john，就能正常加载对应页面了。

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