首先，Vue Router 通过 JavaScript 动态处理 URL 路由，而不是常规的资源索引规则。在刷新页面时，浏览器会向服务器发送请求，Nginx 会根据请求的路径寻找对应的静态资源，而 Vue Router 中的路由路径并不是一个实际存在的文件路径，所以 Nginx 返回了一个 404 错误，这个情况下即需要对Nginx进行配置。

打开 Nginx 配置文件，在配置文件中的 server 块内，修改 location / 配置，使其如下：

server {

    # 其他配置

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

    # 其他配置
}

这条配置的作用是：当请求的 URL 对应的文件或目录不存在时，返回 index.html 文件，即交由 Vue Router 处理。这使得前端路由可以在页面刷新时正常工作。

保存文件可对Nginx进行重启，问题即解决。