前言

今天在搭建vue项目时发现网页在其他页面刷新后会404，在主页就不会。

由于之前搭建时使用的都是祖传代码，就没有出现这种问题，但这次祖传代码丢了就只能自己写，于是出现了上面的问题。

原因

Vue项目在使用Nginx部署后，如果出现访问特定页面404，而访问主域名后恢复正常的现象。这通常是由于前端路由和Nginx配置之间的冲突导致的，特别是在使用Vue Router的history模式时。

Vue的history模式会使应用依赖浏览器的history.pushState，而不是#符号来管理路由。当用户直接通过URL访问某个子路由时，Nginx会尝试寻找该路由对应的静态文件，而不是交给前端路由管理，从而导致404错误。

解决

需要在Nginx配置中添加一个规则，将所有路由重定向到index.html，由前端的Vue Router进行路由管理。

示例

server {
    listen 80 ; 
    listen 443 ssl http2 ; 
    server_name 域名; 
    index index.php index.html index.htm default.php default.htm default.html; 
    proxy_set_header Host $host; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header X-Forwarded-Host $server_name; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_http_version 1.1; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection $http_connection; 
    access_log /log/access.log main; 
    error_log /log/error.log; 

    location ^~ /.well-known/acme-challenge {
        allow all; 
        root /usr/share/nginx/html; 
    }

    location ^~ /api/ {
        proxy_pass http://后端IP:端口/; 
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    }

    # 处理 Vue Router history 模式的路由问题
    location / {
        try_files $uri $uri/ /index.html;  # 确保所有路由都重定向到 index.html
    }

    root /index/blog; 

    if ($scheme = http) {
        return 301 https://$host$request_uri; 
    }

    ssl_certificate /ssl/fullchain.pem; 
    ssl_certificate_key /ssl/privkey.pem; 
    ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1 TLSv1; 
    ssl_prefer_server_ciphers on; 
    ssl_session_cache shared:SSL:10m; 
    ssl_session_timeout 10m; 
    error_page 497 https://$host$request_uri; 
    proxy_set_header X-Forwarded-Proto https; 
    add_header Strict-Transport-Security "max-age=31536000"; 
}

说明

try_files $uri $uri/ /index.html：该代码作用是，Nginx会首先尝试查找用户请求的URI对应的文件，如果没有找到，则会将请求重定向到index.html，这样Vue Router就可以处理该路由。

这样做可以确保无论是直接访问子路由还是刷新页面，都会正确加载Vue应用的内容，而不会出现404错误。