nginx 解决History 二级路由刷新问题

4 min read

当使用Vue.js等前端框架开发单页应用时，页面路由是通过history模式实现的。在使用history模式时，当我们在浏览器地址栏直接敲入二级路由时，nginx会返回404错误。这个问题可以通过nginx做如下配置解决。

  1. 在nginx配置文件中新增一项：

    error_page 404 /index.html;

    当遇到404错误时，nginx会重定向到index.html页面。

  2. 配置location中的二级路由：

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

    这个配置表示，当访问/test/路径时，如果找不到对应的文件，则会访问/index.html。

    将以上两项配置合并到nginx配置文件中，就可以通过二级路由刷新页面了。完整的配置如下：

    server {
    listen      80;
    server_name localhost;
    root        /var/www/html;

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

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

    error_page 404 /index.html;
}