Vue Router history模式刷新页面返回404，请求排查原因

嘿，我来帮你搞定这个问题！你遇到的刷新或直接访问页面返回404的情况，虽然你的Nginx配置看起来加了try_files，但大概率是Docker环境下的配置生效路径或者静态文件挂载出了问题，咱们一步步排查：

可能的原因及解决步骤 #

1. Nginx配置文件没正确覆盖默认配置 #

nginx:alpine镜像默认的配置文件是/etc/nginx/conf.d/default.conf，如果你只是随便把自定义配置放到容器里，没有替换这个默认文件，Nginx根本不会用你的配置。

解决方法：

• 把你的自定义配置文件命名为default.conf，然后通过Dockerfile复制到容器的对应路径，或者在启动容器时挂载：
  • 用Dockerfile的话：

    FROM nginx:alpine
    # 把Vue打包后的dist目录复制到容器的/var/www
    COPY dist/ /var/www/
    # 替换默认的Nginx配置
    COPY your-config-file.conf /etc/nginx/conf.d/default.conf
    

  • 或者直接用docker run挂载：

    docker run -d -p 80:80 -v $(pwd)/dist:/var/www -v $(pwd)/your-config-file.conf:/etc/nginx/conf.d/default.conf nginx:alpine
    

2. 静态文件路径不匹配 #

你配置里的root /var/www意味着Nginx会从这个目录找index.html，但如果你的Vue打包产物（dist目录）没正确挂载或复制到容器的/var/www，Nginx找不到文件自然返回404。

验证方法：
进入容器检查文件是否存在：

docker exec -it <你的容器ID/名称> sh
# 查看/var/www下的文件
ls /var/www

如果看不到index.html和其他静态资源，说明你挂载或复制的路径错了，调整一下dist的挂载路径即可。

3. 额外检查：有没有其他Nginx配置干扰 #

如果你的Nginx配置里还有其他location块，比如匹配静态资源的规则，要确保它们不会优先于你的location /规则。不过从你给出的配置来看只有一个location /，这个可能性比较小，但也可以确认下。

验证配置是否生效 #

修改配置后，重启容器或者进入容器重载Nginx配置：

# 进入容器后执行
nginx -s reload

然后再尝试直接访问/page/4，应该就能正常加载了。

本质上，try_files $uri $uri/ /index.html的作用就是把所有找不到的文件请求都转发到index.html，让Vue Router来处理路由，只要Nginx能正确找到index.html，并且配置生效，问题就解决啦！

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