部署在Nginx上的Angular应用路由异常（直接访问/刷新404）的解决方法

Angular是单页应用（SPA），所有路由逻辑都在前端处理。直接访问或刷新路由时，Nginx会默认去服务器上查找对应路径的物理文件，而这些路径实际不存在，因此返回404错误。以下是具体修复步骤：

修正Nginx配置 #

你提供的原始配置存在语法错误（error_page行缺少分号），且配置不够完善。请替换为以下完整的server块配置：

server {
    listen 80;
    server_name abc.com;

    # 指向Angular打包后的dist目录绝对路径
    root /var/www/abc.com/dist;
    index index.html;

    # 处理所有路由请求：优先匹配静态文件/目录，否则返回index.html由Angular路由处理
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 捕获404错误，重定向到index.html
    error_page 404 /index.html;

    # 禁止缓存index.html，避免用户无法获取最新页面
    location = /index.html {
        expires -1;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    }
}

关键配置说明 #

• root：必须设置为Angular项目打包后dist目录的绝对路径，比如/usr/share/nginx/html/your-app-name
• try_files $uri $uri/ /index.html：Nginx会依次尝试访问请求的文件、请求的目录，若都不存在则返回index.html，交给Angular的前端路由系统处理
• error_page 404 /index.html：确保所有404请求都被转发到index.html，覆盖直接访问路由时的404场景
• location = /index.html：强制禁用index.html的缓存，避免浏览器缓存旧版本页面导致路由异常

后续操作 #

1. 用ng build（Angular 12+）或ng build --prod（旧版本）打包Angular项目，将dist目录下的文件上传到Nginx的对应根目录
2. 重启Nginx服务使配置生效：sudo systemctl restart nginx
3. 检查是否存在其他Nginx配置块（如静态资源规则）干扰当前路由处理，确保location /的优先级最高

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