vue 路由 history 模式刷新页面出现 404 问题？

在Vue应用中，将路由模式从hash改为history确实可以去掉URL中的'#'符号，但的确需要后端服务器如Nginx进行相应的配置以避免页面刷新时出现404错误。以下是两种优化过的Nginx配置示例，旨在更清晰地解决此问题。

方法一（简洁配置）

适用于大多数简单的Vue单页应用部署场景，通过重写规则将所有非静态资源请求重定向到index.html。

server {
    listen 80;
    server_name your_domain.com; # 替换为你的域名

    root /data/nginx/html; # 根据实际情况调整项目部署目录
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html; # 关键行，找不到文件则返回index.html
    }
}

方法二（详细配置）

适用于需要更细致控制或有特定要求的场景，通过定义一个命名位置@router来专门处理Vue路由的刷新问题。

server {
    listen 80;
    server_name your_domain.com; # 替换为你的实际域名

    root /path/to/your/vue/app/dist; # 指向Vue项目打包后的dist目录

    location / {
        try_files $uri $uri/ @router; # 尝试访问请求的文件或目录，如果不存在则转到@router
        index index.html index.htm;
    }

    # 处理Vue路由的请求
    location @router {
        rewrite ^.*$ /index.html last; # 重写所有请求到index.html，由前端路由处理
    }
}

注意事项

• 确保替换server_name和root指令中的路径为你的实际配置。
• 如果你的Vue应用不是部署在服务器根目录下，需要在root指令中正确设置。
• 上述配置均假设Nginx的默认监听端口为80，若使用非默认端口，请相应修改listen指令。
• 方法二中，通过try_files和命名位置@router的组合使用，提供了更明确的逻辑处理，尤其适合需要更细粒度控制的场景。