Nginx 配置完反向代理后页面加载空白怎么办？

长孙东宇提问于 2026-02-28 13:22:22 阅读 70

前端

我本地用 Vue 开发了一个前端项目，打包后放到 Nginx 里，想通过反向代理访问后端 API，但配置完之后页面完全空白，控制台也没报错。

我试过直接访问静态文件是正常的，但加上 proxy_pass 之后就不行了。我的 Nginx 配置大概长这样：

server {
    listen 80;
    server_name localhost;
    root /dist;
    index index.html;

    location /api/ {
        proxy_pass http://localhost:3000/;
    }

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

是不是哪里写错了？为什么加了代理反而页面出不来了？

我来解答赞 6 收藏

反馈

2 条解答

一淑丽 Lv1

这配置问题挺典型的，看一眼就明白问题在哪了。

你的 location /api/ 用的是前缀匹配，代理到 http://localhost:3000/ 时会把 /api/ 这部分路径给带过去，这是对的。但问题出在 location / 这块——try_files $uri $uri/ /index.html; 这个 fallback 规则会拦截所有请求，包括那些本该返回静态文件的请求。

更可能的情况是：你的静态资源请求被某个规则错误处理了，或者代理配置影响了静态文件的返回。

改一下配置，把静态资源明确分离出来：

server {

    listen 80;

    server_name localhost;

    root /dist;

    index index.html;



    # 静态资源直接返回，不走代理

    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {

        expires 1y;

        add_header Cache-Control "public, no-transform";

    }



    # API 代理

    location /api/ {

        proxy_pass http://localhost:3000/;

        proxy_http_version 1.1;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

    }



    # Vue 路由 fallback

    location / {

        try_files $uri $uri/ /index.html;

    }

}

核心改动就两点：加了静态资源的正则匹配，让这些文件直接返回，别被代理规则影响；然后 API 走代理，静态文件走静态的。

如果还是空白，打开 Nginx 错误日志看看具体报啥，一般在 /var/log/nginx/error.log 或者看 journalctl -u nginx -f。控制台没报错大概率是资源加载失败但没抛异常，日志里应该有线索。

对了，如果你这 Vue 是跑在 Apache 环境下用 .htaccess 配置的，迁移到 Nginx 时经常会遇到这种问题，规则写法不一样。

2026-03-19 22:22

克培 Lv1

看了你的配置，问题大概率出在 root /dist; 这个路径上。这是个绝对路径，指向的是根目录下的 /dist，你确定你的打包文件放那儿了？一般应该是 /usr/share/nginx/html/dist 或者你项目的实际路径。

另外，页面空白但控制台没报错，通常是静态资源 404 了，打开浏览器 Network 面板看看 js、css 文件是不是红色的。

代码给你，照着改：

server {

    listen 80;

    server_name localhost;



    # 这里改成你的实际路径，别用 /dist 这种根路径

    root /usr/share/nginx/html/dist;

    index index.html;



    location /api/ {

        proxy_pass http://localhost:3000/;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

    }



    location / {

        try_files $uri $uri/ /index.html;

    }

}

改完记得 reload 一下：

nginx -t  # 先测试配置有没有语法错误

nginx -s reload

还有个坑，Vue 打包的时候检查一下 vue.config.js 或者 vite.config.js 里的 publicPath 配置。如果你部署在根路径，设置成 /，如果部署在子路径比如 /app，那 publicPath 也要改成 /app，不然静态资源也会加载不到。

如果还不行，先注释掉 /api/ 那段 location，确认静态资源本身能正常访问，再逐步排查代理的问题。

2026-02-28 17:19