解决Nginx中Vue/React等History模式刷新404问题

当使用Vue Router或React Router等前端路由的history模式时，刷新页面或直接访问深层路由会出现404错误。这是因为Nginx默认会尝试查找对应路径的文件，而实际上这些路由应该由前端JavaScript处理。

解决方案

基本配置

在Nginx配置文件中添加以下内容：

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

这个配置告诉Nginx： 1. 首先尝试匹配请求的URI对应的文件 2. 如果没有找到，尝试匹配目录 3. 如果都找不到，则返回index.html，由前端路由处理

完整示例配置

server {
    listen 80;
    server_name yourdomain.com;
    root /path/to/your/app;
    index index.html;

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

    # 其他配置...
}

针对API请求的特殊处理

如果你的应用有后端API，需要确保API请求不会被重定向到index.html：

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

location /api/ {
    proxy_pass http://backend;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    # 其他代理配置...
}

带子目录的部署

如果应用部署在子目录下（如/app/）：

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

原理说明

1. History模式：前端路由使用HTML5 History API来模拟完整的URL路径，而不使用hash模式(#)
2. 问题根源：当用户直接访问或刷新非根路径时，Nginx会尝试查找该路径对应的文件/目录
3. 解决方案：通过try_files将所有非静态资源的请求重定向到index.html，由前端路由处理

其他注意事项

1. 确保你的前端应用配置了正确的publicPath（Vue CLI）或homepage（React）
2. 对于静态资源，确保它们有正确的缓存头
3. 在生产环境中，考虑添加gzip压缩和安全头

验证配置

修改配置后，执行以下命令检查并重载Nginx：

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

这样配置后，无论用户访问任何路径，Nginx都会返回index.html，然后由前端路由处理实际的页面渲染。