nginx - Nginx 背后的 VueJS 路由器历史模式

Question

我的问题

我已经阅读了 official documentation用于将 VueJS 路由器置于 Nginx 后面的历史模式以及以下内容:

Stackoverflow - vue-router, nginx and direct link

Stackoverflow - How to config nginx for Vue-router on Docker

在查看所有这些并多次进行更改后，我仍然无法提供到我的路线的直接链接并让它们正确加载(也就是说，除了 / 之外，我得到了 404 )。

我的环境

我正在创建一个 nginx docker 镜像( nginx:alpine )并让它为静态 VueJS 文件提供服务。

我的配置

文件

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY . .
RUN npm install && npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY prod_nginx.conf /etc/nginx/nginx.confg
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Nginx 配置

Nginx 版本:1.16.1

user                    nginx;
worker_processes        1;
error_log               /var/log/nginx/error.log warn;
pid                     /var/run/nginx.pid;
events {
    worker_connections  1024;
}

http {
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
    log_format          main '$remote_addr - $remote_user [$time_local] "$request" '
                             '$status $body_bytes_sent "$http_referer"'
                             '"$http_user_agent" "$http_x_forwarded_for"';
    access_log          /var/log/nginx/access.log main;
    sendfile            on;
    keepalive_timeout   65;
    server {
        listen          80;
        server_name     _ default_server;
        index           index.html;
        location / {
            root        /usr/share/nginx/html;
            index       index.html;
            try_files   $uri $uri/ /index.html;
        }
    }
}

Answer 1

因此，我联系了另一位工作中的开发人员，当他们审查设置时，我指出我的 Dockerfile 中有/有一个错字:
COPY prod_nginx.conf /etc/nginx/nginx.confg
需要是:
COPY prod_nginx.conf /etc/nginx/nginx.conf
愚蠢的小错别字!一旦我解决了这个问题，Nginx 和路由器就可以工作了!