Nginx 显示 404，但 vue-cli 服务路由答案

【问题标题】：Nginx shows 404, but vue-cli serves the routeNginx 显示 404，但 vue-cli 服务路由
【发布时间】：2020-06-30 14:53:47
【问题描述】：

我使用 vue-cli 开发了我的应用程序。似乎它可以抓取任何 URL 请求并且 Vue 能够处理它。例如。当我在 Chrome 中输入 http://localhost:8080/prihlaseni 时，页面被渲染。

我最近尝试使用 Nginx 来提供内容并为 NodeJS 后端做一个反向代理。但是这次这个 URL http://localhost/prihlaseni 返回 Nginx 错误 404。如何修复它以使 vue 处理这个 URL？

server {
    listen       80;
    server_name  localhost;

    location / {
        index  index.html index.htm;
        root   C:\dev\mezinamiridici\spa\dist;
    }

    location /api/ {
        proxy_pass                          http://127.0.0.1:3000/;
    }
}

【问题讨论】：

标签： vue.js nginx

【解决方案1】：

您应该配置 nginX 以捕获所有不存在的路径并将它们重写为 index.html

    location / {
        try_files $uri @rewrite;
        root   C:\dev\mezinamiridici\spa\dist;
    }


    location /api/ {
        proxy_pass   http://127.0.0.1:3000/;
    }
        
    location @rewrite {
        rewrite ^(.*)$ /index.html last;          
    }

【讨论】：

谢谢，我会用根指令更新你的答案，让它工作。