Vue Router 和 Nginx 刷新时出现 404 错误

Question

我在一个Ubuntu服务器上有一个项目，当刷新或手动输入URL时会产生404错误。例如，我可以进入example.com，但是我不能进入example.com/home或在该页面上刷新而不获得404。点击链接的效果符合预期。我正在使用Vue路由器以历史模式，并已在nginx.conf文件的http部分中添加了以下内容：

server {

            listen 80;
            server_name example.com;

            root /var/www/example.com;

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

我可以使用sudo nginx -t测试配置，测试通过，但我仍然遇到404错误。值得一提的是，我在这个服务器上有多个服务器块。

- Nolan Melhart

---

为什么你不在location /行之前添加index index.html呢？ - Bijay Regmi

是的，最终我发现我需要这样做。现在一切都正常了。 - Nolan Melhart

Answer 1

我稍微修改了nginx.conf文件，这样就可以正常工作:

server {

            listen 80;
            server_name example.com;

            index index.html;

            location / {
                    root /var/www/example.com;
                    index index.html;
                    try_files $uri $uri/ /index.html;
            }
    }

- Nolan Melhart

---

这会保持地址栏中的相同路由吗？我正在尝试创建一个404页面，它能返回正确的状态码，并且在Vue中只是视觉上的变化。我们已经通过使用标准的path: '/:pathMatch(.*)*',实现了这一点。 - undefined

你真是个救命稻草 - undefined

Answer 2

Dockerfile

FROM nginx:1.22.0-alpine
COPY ./dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

server {
    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

构建镜像

docker build -t ui .

运行容器

docker run -d --name ui -p 80:80 ui

- Dragonphy