【问题标题】：VueJS Router History Mode behind NginxNginx 背后的 VueJS 路由器历史模式
【发布时间】：2020-01-27 22:53:57
【问题描述】：

我的问题

我已经阅读了 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 文件提供服务。

我的配置

Dockerfile

# 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;
        }
    }
}

【问题讨论】：

标签： nginx vuejs2

【解决方案1】：

因此，我联系了工作中的另一位开发人员，当他们审查设置时，我指出我的 Dockerfile 中有错字：

COPY prod_nginx.conf /etc/nginx/nginx.confg

需要：

COPY prod_nginx.conf /etc/nginx/nginx.conf

愚蠢的小错别字！一旦我解决了这个问题，Nginx 和路由器就可以工作了！

【讨论】：