Nginx变量root场景下try_files最后值失效及Vue项目配置求助

这个问题其实是Nginx指令执行顺序导致的——当你在server块用if设置$dir后，location /里的root和try_files的解析时机不一样，try_files里的/index.html会提前绑定初始的root值，不会跟着$dir的动态变化走。

给你两个可靠的解决方案，优先推荐第一个（更符合Nginx最佳实践）：

方案一：使用map指令动态设置root路径 #

map是Nginx专门用来根据变量值生成新变量的工具，比if更高效且行为更可控。配置如下：

# 在http块内、server块外定义map规则
map $http_user_agent $root_dir {
    default /web/pcResource;
    ~*(Android|iPhone|iPod|Symbian|BlackBerry|Windows Phone|Mobile|J2ME) /web/mobileResource;
}

server {
    # 你的其他server配置（比如listen、server_name等）
    
    location / {
        root $root_dir;
        try_files $uri $uri/ @fallback_to_index;
    }

    # 命名location，专门处理路由 fallback 逻辑
    location @fallback_to_index {
        root $root_dir;
        rewrite ^ /index.html last;
    }
}

为什么这样能解决问题？因为@fallback_to_index这个命名location是在请求实际需要 fallback 时才会执行，此时$root_dir已经根据User-Agent完成了正确赋值，root $root_dir会动态指向对应的资源目录，最终加载的index.html自然就是对应端的文件了。

方案二：保留if但调整配置结构（不推荐，if存在潜在坑） #

如果你一定要用if实现，可以通过命名location延迟root的解析时机，确保$dir的动态值被正确使用：

server {
    # 你的其他server配置
    
    set $dir "/web/pcResource";
    if ($http_user_agent ~* "(Android|iPhone|iPod|Symbian|BlackBerry|Windows Phone|Mobile|J2ME)") {
        set $dir "/web/mobileResource";
    }

    location / {
        try_files $uri $uri/ @dynamic_index;
    }

    location @dynamic_index {
        root $dir;
        rewrite ^ /index.html last;
    }
}

不过还是建议优先使用map方案，因为Nginx官方文档明确指出if在某些场景下会出现非预期的行为，属于需要谨慎使用的指令。

验证一下：不管是PC还是移动端，刷新非根URL时，fallback到的index.html都会来自对应的资源目录，不会再出现404错误了。

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