我正在开发一个 VueJS 单页应用程序，对于本地开发，我使用 Docker 和一个docker-compose.yml文件来处理 Web 服务器的 Nginx 容器和用于资产编译的 Node 容器。
目前，/configurator根/路由应重定向到的路由上只有一个页面，使用 Vue 路由器，它可以正常工作：/正确访问会重定向到/configurator。
刷新页面时出现问题，因为 Nginx 无法处理请求，因为给定的 uri 没有合适的文件可供使用。
VueJS文档设置 Nginx 配置location部分如下，以便将每个请求重定向到项目索引，从而让 Vue 路由器处理导航
location / {
try_files $uri $uri/ /index.html;
}
因此我创建了一个自定义nginx.conf文件并通过我的文件将其添加/重命名为 Nginx 容器，docker-compose.yml如下所示，但我仍然得到 Nginx 的 404。
从 Nginx 容器内部检查是否nginx -T正确列出了我的自定义文件，但我注意到该default.conf文件是列表中的最后一个，因此我认为 Nginx 按字母顺序添加了其他文件，并且我的文件不是最后一个，我的自定义配置被覆盖了default.conf，所以我编辑了 docker-compose.yml 以将其命名为添加，以z_custom.conf确保它作为最后一个，但什么都没有改变。
在线搜索时，我注意到我找到的每个示例的自定义文件内容都与默认文件内容相同，除了需要的自定义之外，所以我认为我确实需要完全覆盖default.conf文件并编辑我需要的部分，但找不到任何明确的迹象。
这是正确的吗？或者有没有办法真正合并整个默认配置中的我的自定义部分？
自定义配置文件
server {
#Vue router configuration
location / {
try_files $uri $uri/ /index.html;
}
}
docker-compose.yml
webserver:
image: nginx:latest
container_name: webserver
restart: unless-stopped
ports:
- 80:80
volumes:
- ./application/public:/usr/share/nginx/html:ro
- ./nginx.conf:/etc/nginx/conf.d/custom.conf:ro
更新#1：添加server_name自定义配置文件
按照@tero-kilkanen 的回答，我尝试在我的 conf 文件的根部分server_name localhost中添加它，并更新为将其复制到 Nginx 镜像中，但没有任何变化，在非索引路由上仍然出现 404。serverdocker-compose.ymllocalhost.conf
更新 #2
之前没有注意到，之前的更新导致默认配置和自定义配置之间发生冲突，因为两个文件都声明了相同的服务器名称，所以现在我只是default.conf用我的自定义文件替换，并更新了location如下部分，但在非根路由上仍然出现 404。
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
运行nginx -T并nginx -t确认我的自定义配置文件被正确读取和使用：
root@be898ad4ca17:/# nginx -T
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
# configuration file /etc/nginx/nginx.conf:
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
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;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
# configuration file /etc/nginx/mime.types:
types {
text/html html htm shtml;
text/css css;
text/xml xml;
image/gif gif;
image/jpeg jpeg jpg;
application/javascript js;
application/atom+xml atom;
application/rss+xml rss;
text/mathml mml;
text/plain txt;
text/vnd.sun.j2me.app-descriptor jad;
text/vnd.wap.wml wml;
text/x-component htc;
image/avif avif;
image/png png;
image/svg+xml svg svgz;
image/tiff tif tiff;
image/vnd.wap.wbmp wbmp;
image/webp webp;
image/x-icon ico;
image/x-jng jng;
image/x-ms-bmp bmp;
font/woff woff;
font/woff2 woff2;
application/java-archive jar war ear;
application/json json;
application/mac-binhex40 hqx;
application/msword doc;
application/pdf pdf;
application/postscript ps eps ai;
application/rtf rtf;
application/vnd.apple.mpegurl m3u8;
application/vnd.google-earth.kml+xml kml;
application/vnd.google-earth.kmz kmz;
application/vnd.ms-excel xls;
application/vnd.ms-fontobject eot;
application/vnd.ms-powerpoint ppt;
application/vnd.oasis.opendocument.graphics odg;
application/vnd.oasis.opendocument.presentation odp;
application/vnd.oasis.opendocument.spreadsheet ods;
application/vnd.oasis.opendocument.text odt;
application/vnd.openxmlformats-officedocument.presentationml.presentation
pptx;
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
xlsx;
application/vnd.openxmlformats-officedocument.wordprocessingml.document
docx;
application/vnd.wap.wmlc wmlc;
application/wasm wasm;
application/x-7z-compressed 7z;
application/x-cocoa cco;
application/x-java-archive-diff jardiff;
application/x-java-jnlp-file jnlp;
application/x-makeself run;
application/x-perl pl pm;
application/x-pilot prc pdb;
application/x-rar-compressed rar;
application/x-redhat-package-manager rpm;
application/x-sea sea;
application/x-shockwave-flash swf;
application/x-stuffit sit;
application/x-tcl tcl tk;
application/x-x509-ca-cert der pem crt;
application/x-xpinstall xpi;
application/xhtml+xml xhtml;
application/xspf+xml xspf;
application/zip zip;
application/octet-stream bin exe dll;
application/octet-stream deb;
application/octet-stream dmg;
application/octet-stream iso img;
application/octet-stream msi msp msm;
audio/midi mid midi kar;
audio/mpeg mp3;
audio/ogg ogg;
audio/x-m4a m4a;
audio/x-realaudio ra;
video/3gpp 3gpp 3gp;
video/mp2t ts;
video/mp4 mp4;
video/mpeg mpeg mpg;
video/quicktime mov;
video/webm webm;
video/x-flv flv;
video/x-m4v m4v;
video/x-mng mng;
video/x-ms-asf asx asf;
video/x-ms-wmv wmv;
video/x-msvideo avi;
}
# configuration file /etc/nginx/conf.d/default.conf:
server {
listen 80;
listen [::]:80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
答案1
最佳实践是server_name在您的块中指定。然后，当您使用 URL 中的名称请求页面时，servernginx 将为您的应用程序使用该块。server