Flutter Web打release包部署Nginx后路由跳转刷新出现404问题求助

问题原因 #

你启用了url_strategy的路径模式（移除了URL里的#），Flutter Web的路由是前端单页应用内部控制的，Nginx上并没有对应子路由的真实静态文件，刷新时浏览器直接请求子路由路径，Nginx找不到对应文件就返回404。

解决方案 #

修改你的Nginx配置文件，调整location /块的规则，让所有请求都 fallback 到index.html，交给Flutter的前端路由处理：

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/flutter_web_project/build/web; # <- flutter build web打包产物目录

        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                # 把原来的=404改成/index.html即可
                try_files $uri $uri/ /index.html;
        }
}

生效步骤 #

1. 先测试Nginx配置是否合法，执行命令：sudo nginx -t，返回success表示配置无误
2. 重载Nginx配置生效：sudo systemctl reload nginx
3. 清空浏览器缓存后刷新子路由页面，即可正常访问，不会再返回404。

补充说明 #

如果后续需要部署到域名子路径下，还需要在打包时指定--base-href=/你的子路径/，同时同步修改Nginx的fallback路径为/你的子路径/index.html即可。

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