NGINX配置问题：子路径部署的网页无法加载CSS与图片

部署在子路径/nextgen下时，页面能正常加载，但本地静态资源（如css/styles3.css、images/LSEG-stacked-logo.png）加载失败，错误显示浏览器直接请求了根路径（如https://example.com/styles3.css）。之前修改配置后资源请求返回200但样式仍不生效，核心原因是NGINX把静态资源请求也返回了index.html内容，而非实际的资源文件。

1. 修正NGINX配置，区分静态资源与SPA路由 #

修改server块中的配置，先匹配实际存在的静态资源，匹配不到再返回index.html用于SPA路由：

server {
    listen       80;
    listen       [::]:80;
    server_name  _;
    root         /usr/share/nginx/html;

    include /etc/nginx/default.d/*.conf;

    # 处理/nextgen下的静态资源请求
    location ~ ^/nextgen/(css|images|js)/ {
        # 移除URL中的/nextgen前缀，映射到服务器上的对应目录
        rewrite ^/nextgen/(.*)$ /$1 break;
        try_files $uri =404;
    }

    # 处理SPA路由，无匹配资源时返回index.html
    location /nextgen {
        try_files $uri $uri/ /nextgen/index.html;
    }
    
    error_page 404 /404.html;
    location = /404.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

配置说明 #

• location ~ ^/nextgen/(css|images|js)/：精准匹配所有/nextgen/css/、/nextgen/images/、/nextgen/js/开头的请求，通过rewrite去掉前缀后，从root目录的对应文件夹读取资源。
• location /nextgen：仅当请求不是静态资源时，才返回/nextgen/index.html，保证单页应用的路由逻辑正常。

2. 确保HTML资源路径正确 #

可以通过两种方式固定资源路径：

• 方式一：保留相对路径
  当前HTML中的资源路径（如css/styles3.css）已是相对路径，只要NGINX配置正确，会自动映射到/usr/share/nginx/html/css/styles3.css。
• 方式二：添加<base>标签（推荐）
  在HTML的<head>中添加基准URL标签，让所有相对路径都基于子路径解析：

  <!DOCTYPE html>
  <meta charset="utf-8">
  <!-- 添加基准路径标签 -->
  <base href="/nextgen/">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" ...>
  <!-- 其他资源路径保持不变 -->
  <link rel="stylesheet" type="text/css" href="css/styles3.css" />
  

3. 验证配置并重启NGINX #

1. 检查配置语法是否合法：

   nginx -t
   

2. 重启NGINX使配置生效：

   systemctl restart nginx
   

访问https://example.com/nextgen，打开浏览器开发者工具查看网络请求：

• 静态资源的请求路径应为https://example.com/nextgen/css/styles3.css，返回内容为CSS文件而非HTML
• 图片请求路径应为https://example.com/nextgen/images/LSEG-stacked-logo.png，返回正确的图片资源

内容的提问来源于stack exchange，提问作者Venki