Nginx配置疑问：如何将除/api、assets外的所有路由转发至Angular的index.html

阿华AIGC实验室

2026-4-17

你遇到的这个问题是Angular单页应用部署到Nginx时的典型场景——客户端路由在刷新或直接访问子路径时触发Nginx的404，核心原因是Nginx默认会尝试寻找对应路径的静态文件，而Angular的路由是在前端处理的，需要让Nginx把这些请求都转发到index.html。

先梳理你当前配置里的关键问题和优化方案：

1. 先修正语法错误：`server-name` 应该是 `server_name`

Nginx里定义域名的指令是server_name（下划线连接），你写成了server-name（连字符），这会导致这个server块无法被Nginx正确识别，大概率是你的try_files规则不生效的主要原因之一。

2. 调整`try_files`规则，确保根路径定位正确

你的try_files写法方向是对的，但可以优化一下，明确指向根目录下的index.html：

location / {
    try_files $uri $uri/ /index.html;
}

这里的/index.html一定要加开头的斜杠，避免Nginx在子路径下去找不存在的index.html文件。

3. 优化`/assets`路径的匹配优先级

虽然/assets和/api路径不重叠，但为了避免其他正则规则的干扰，可以给/assets的location加上^~前缀，让Nginx优先匹配这个静态资源路径：

location ^~ /assets {
    try_files $uri =404;
}

这样Nginx会直接处理/assets开头的静态资源请求，找不到就返回404，不会再走其他路由规则。

完整修正后的配置

把这些调整整合后，最终的server块如下：

server {
    root /var/www/example.com/site-root;
    server_name example.com; # 修正拼写错误

    # 优先处理静态资源
    location ^~ /assets {
        try_files $uri =404;
    }

    # 代理API请求到后端
    location ~ ^/api/(.*)$ {
        proxy_pass http://127.0.0.1:3322/$1;
        # 保留你原有的代理配置即可
    }

    # 所有其他请求转发到Angular入口文件
    location / {
        try_files $uri $uri/ /index.html;
    }
}