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

Question

我的问题

我已经阅读了将 VueJS 路由器置于 Nginx 后面的历史模式的官方文档以及以下内容：

Stackoverflow - vue-router、nginx 和直接链接

Stackoverflow - 如何在 Docker 上为 Vue-router 配置 nginx

在查看了所有这些并进行了多次更改之后，我仍然无法提供指向我的路线的直接链接并让它们正确加载（也就是说，除了 ，我得到了 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 和路由器就可以工作了！