Vue 项目使用 History 模式时，通过 Nginx 解决刷新页面丢失的问题

Yami
2025年11月26日
61
运维相关#Nginx#Vue

在 Vue 项目中使用 history 模式时，前端路由不会添加 # 符号，路由路径看起来像常规的 URL（例如 /home、/about）。这使得用户可以通过链接直接访问页面，或者通过刷新页面重新加载该页面。但是，在后端（如 Nginx）未正确配置时，刷新页面可能会导致 404 错误，因为服务器并不理解该路径。 我们可以通过 Nginx 来处理这个问题，确保所有请求都指向 index.html，以便 Vue Router 可以接管路由控制。

1.配置 Nginx 解决刷新问题

server {
    ...
    
    location / {
        # 关键配置，确保所有路由都回到 index.html
        try_files $uri $uri/ /index.html;
    }
    
  ...
}

2. 配置内容

try_files $uri $uri/ /index.html; 这行配置告诉 Nginx 尝试访问请求的文件，如果文件不存在，重定向到 index.html。这样，当你刷新页面或者访问某个不存在的路径时，Nginx 会始终返回 index.html，并且 Vue Router 会根据路径进行路由。

3. 重启 Nginx

在修改 Nginx 配置文件后，需要重新加载或重启 Nginx，使其生效。可以使用以下命令来重新加载 Nginx 配置：

sudo nginx -t  # 测试配置是否正确
sudo systemctl reload nginx  # 重新加载配置

如果配置有问题，nginx -t 会输出相关错误信息。

1.配置 Nginx 解决刷新问题

server {
    ...
    
    location / {
        # 关键配置，确保所有路由都回到 index.html
        try_files $uri $uri/ /index.html;
    }
    
  ...
}

2. 配置内容

try_files $uri $uri/ /index.html; 这行配置告诉 Nginx 尝试访问请求的文件，如果文件不存在，重定向到 index.html。这样，当你刷新页面或者访问某个不存在的路径时，Nginx 会始终返回 index.html，并且 Vue Router 会根据路径进行路由。

3. 重启 Nginx

在修改 Nginx 配置文件后，需要重新加载或重启 Nginx，使其生效。可以使用以下命令来重新加载 Nginx 配置：

sudo nginx -t  # 测试配置是否正确
sudo systemctl reload nginx  # 重新加载配置

如果配置有问题，nginx -t 会输出相关错误信息。

加载中...